如何显示 base64 图像 - React Native

Question

长话短说；
我从 API 获取团队 ID。当我得到我的团队 ID 时，我想向我的服务器发出一个获取请求，该服务器具有从数据库中获取 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 结果并将其插入到任何图像元素中并且它可以工作。

提前致谢！

Answer 1

您的 getLogo 函数是异步的，这意味着它不会直接返回图像的 base64 字符串 - 相反，它只会触发 HTTP 请求并退出，并且您的 then 处理程序会在以下情况下履行响应承诺数据进来了。你最好的办法是更新这个组件的状态，并在你的视图中引用它。

所以你的 HTTP 调用会变成这样：

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

（请注意，我已经删除了要传入 teamid 的参数，因为您似乎在组件上使用了设置变量 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;
}

然后，您可以引用{this.renderLogo} 任何您希望在render 中显示徽标的位置 - 这样做意味着它不会显示任何内容，因为它会在 HTTP 调用返回之前返回 null，此时它'将更新状态，触发重新渲染，并显示标志。如果您想指示徽标正在加载，您还可以使用微调器或某种替代视图而不是 null。

您需要在某个时候调用 getLogo 来启动 HTTP 请求 - 通常最好不要在渲染循环内对数据发出额外的请求。

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

希望对你有帮助，还有什么问题可以留言！