Question

我正在使用crna / expo构建React本机应用程序。我想显示一个已经从API上传的图像。由于图像已上传，因此我需要使用require而不是uri作为源。但是，当我输入以下代码时，我无法调用该图片：

 <Image source={{require('this.state.user.picture')}} style={{ width: 75, height: 75, borderRadius: 37.5 }} />

此外，当我将其更改为uri时，它也未显示任何内容。...（不是错误提示）

<Image source={{uri:this.state.user.picture}} style={{ width: 75, height: 75, borderRadius: 37.5 }} />

有人可以帮助我吗？非常感谢！

Answer 1

我建议的是根据某些条件修改类型，例如。

注意：需要图像的本地路径，而uri需要http链接

let image = {uri:this.state.user.picture}; 

if(something){
 image = require('../../demo.jpg');
}

<Image source={image} style={{ width: 75, height: 75, borderRadius: 37.5 }} />

Answer 2

您的代码中的问题是，当您只需要一对时，您正在使用双花括号。

尝试这样：

 <Image source={require('this.state.user.picture')} style={{ width: 75, height: 75, borderRadius: 37.5 }} />

请记住，双花括号只是prop值中内联的对象文字。

Answer 3

如果答案是data型图片，则必须这样做：

// include at least width and height!
<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: 'contain',
  }}
  source={{
    uri:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
  }}
/>

将uri更改为this.state.user.picture

Answer 4

我得到了相同的行为。只需在图像上添加width和height就可以了。

Answer 5

使用`` 从变量调用图像

<Image style={{ width: 50, height: 200 }} 
        source={{ uri: `${item.image}` }} />

如何在React Native中从API显示图像？

5 个答案: