image - 如何在 React Native 中显示来自 API 的图像？

Question

我正在使用 crna/expo 构建一个 React Native 应用程序。我想显示已经从 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

如果您的答案是数据类型图像，则必须这样做:

// 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==',
  }}
/>

使用 this.state.user.picture 更改 uri