时间戳

首页 > 解决方案 > 如何在 React Native 中显示来自 API 的图像？

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

问题描述

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

谁能帮帮我吗？太感谢了！

标签： imageapireact-native

解决方案

如果您的答案是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

推荐阅读