时间戳

首页 > 解决方案 > 即使图像路径正确，React-Native -Elements Avatar 也不会渲染并仅显示灰色背景

reactjs - 即使图像路径正确，React-Native -Elements Avatar 也不会渲染并仅显示灰色背景

问题描述

我正在尝试在我的 React_Native 应用程序的 listItem 中呈现头像，但即使我的图像 URI 路径正确并且它只给出灰色背景，图像也没有呈现。

这是我的代码

<View>
      {props.dishes.map((l, i) => (
        <ListItem key={i} bottomDivider>
          <Avatar rounded source={{ uri: l.image }} />
          <ListItem.Content>
            <ListItem.Title>{l.name}</ListItem.Title>
            <ListItem.Subtitle>{l.description}</ListItem.Subtitle>
          </ListItem.Content>
        </ListItem>
      ))}
    </View>

这是我得到的图像

在此处输入图像描述

我希望在那里渲染图像，但它只显示灰色背景。我还尝试放置在线图像的 URI，但它给出了相同的结果。

我也遵循了这里提到的解决方案，但它不起作用。

我还通过了在线 uri 来检查我的路径 uri 是否不正确，但结果相同

<Avatar
     source={{
              uri:"https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",        
            }}
          />

标签： reactjsreact-nativereact-native-androidreact-native-flatlistcreate-react-native-app

解决方案

我解决了这个问题，因为像这样传递图像的路径不起作用绕过像这样的图像路径只呈现灰色背景。

<Avatar rounded source={{ uri: "./images/uthappizza.png"}} />

这就是我使用 require() 正确传递图像路径及其渲染的方式

<Avatar rounded source={require("./images/uthappizza.png")} />

推荐阅读