reactjs - 如何显示 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 请求并退出，然后您的 处理程序在数据传入时履行响应 promise 。您最好的选择是更新此组件状态中的某些内容，并在您的 View 中引用它。

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

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

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

然后您可以将 Logo 呈现移动到它自己的函数中:

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 中希望 Logo 显示的任何位置引用 {this.renderLogo} - 这样做意味着它不会显示任何内容将返回 null 直到 HTTP 调用返回，此时它将更新状态、触发重新渲染并显示 Logo 。如果您想指示 Logo 正在加载，您还可以使用微调器或某种替代 View 而不是 null。

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

如果这是 Logo 数组的一部分，并且您需要针对不同的团队 ID 多次调用它(这可能就是您接受 teamid 作为参数的原因？)，或者实际上如果你计划在 Logo 中添加任何其他复杂性或逻辑，我强烈建议将它移到它自己的 TeamLogo 组件中，该组件可以将 id 作为 Prop 传递，在组件中进行 HTTP 调用初始化，并根据上述状态更新相应地渲染base64图像。

希望对您有所帮助，如有任何其他问题，请发表评论!