如何在React Native中展示Base64图片

Question

简而言之：我从API中获取团队ID。当我得到我的团队ID时，我想向我的服务器发出get请求，查询数据库中的base64，然后在收到字符串时显示它。

目前，我正在使用一个函数来获取图像：

getLogo(teamid) {
  axios.get('url' + teamid)
    .then(res => return res.data);
}

所以这是我的函数，这是我的图像组件。

<Image
  source={{ uri: `data:image/png;base64,${this.getLogo(this.homeid)}`}}
  style={{ height: 50, width: 50 }}
/>

这样做有问题吗？我应该采用不同的方法吗？我知道从我的端点获取的base64是正确的，因为我尝试过console.log结果并将其插入任何图像元素中，它都可以正常工作。

提前感谢！

- Sebastian Berglönn

---

请查看此处的答案 https://dev59.com/O1YM5IYBdhLWcg3w-T0e#48135708 - Sachin Rajput

它会帮助你 - Sachin Rajput

对于 React Native Web，我无法从 API 中加载 base64 图像。 - Harsha

Answer 1

您的getLogo函数是异步的，这意味着它不会直接返回图像的 base64 字符串 - 相反，它只会触发 HTTP 请求并退出，当数据到达时，您的then处理程序会实现响应承诺。 那么您最好的选择就是更新此组件中的某个状态，并在视图中引用该状态。

因此，您的 HTTP 请求将变为：

getLogo() {
  axios.get('url' + this.homeid)
    .then(res => this.setState({logo: res.data}));
}

(请注意，我已删除传递团队id的参数，因为似乎您已经在组件中使用一个设置变量this.homeid来驱动它)

然后您可以将徽标渲染移动到自己的函数中：

renderLogo() {
  let logoImage = null;
  if (this.state.logo) {
    logoImage = (
      <Image
        source={{ uri: `data:image/png;base64,${this.state.logo}`}}
        style={{ height: 50, width: 50 }}
      />
    );
  }
  return logoImage;
}

您可以在render中引用{this.renderLogo}，以便在需要显示徽标的任何位置 - 通过这种方式进行操作意味着它将不会显示任何内容，因为它将返回null，直到HTTP调用返回，此时它将更新状态，触发重新渲染，并显示徽标。如果您想指示正在加载徽标，也可以使用旋转器或其他视图替代null。

您需要在某个时间点调用getLogo来启动HTTP请求 - 总的来说，在渲染循环内部不要进行数据的额外请求是个好主意。

如果这是徽标数组的一部分，并且您需要为不同的团队ID多次调用它（这可能是您接受teamid作为参数的原因之一？），或者如果您计划添加任何其他复杂性或逻辑到徽标中，我强烈建议将其移动到自己的TeamLogo组件中，该组件可以将ID作为属性传递，初始化时进行HTTP调用，并根据状态更新相应的base64图像进行呈现。

希望对您有所帮助，如有进一步问题，请留言！

- ejdraper