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

【问题标题】：React-Native -Elements Avatar not rendering and showing only gray background even though the image path is correct即使图像路径正确，React-Native -Elements Avatar 也不会渲染并仅显示灰色背景
【发布时间】：2021-02-26 07:50:34
【问题描述】：

我正在尝试在我的 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，但结果相同。

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

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

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

【问题讨论】：

console.log(l.image) 显示什么？
图片路径 images/uthappizza.png images/zucchipakoda.png images/vadonut.png images/elaicheesecake.png
传入头像中的样式对象，设置高宽就可以看到图片了
@MayankPandeyz 它只是增加了灰色背景的大小
如果您没有在给定的 url 上获取图像资源，请检查

标签： reactjs react-native react-native-android react-native-flatlist create-react-native-app

【解决方案1】：

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

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

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

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

【讨论】：

这对我有用，使用本地图像，但我仍然从远程图像中得到灰色阴影。

【解决方案2】：

我尝试了几种方法，直到我找到一个鼓励我检查模拟器连接的人......这就是问题所在！

要解决这个问题，在运行您的应用之前，请使用

启动模拟器

emulator -avd <your-emulator-name> -dns-server 8.8.8.8

【讨论】：