我的响应包含一个 png，由于它不是 url，因此如何在 React 中显示该图像？

Question

我有一个包含 png 格式图像的响应，但我无法在 React 中显示它，因为它不是 响应的 url 图片

有谁知道如何将此 png 转换为 URL，以便将其插入到我的 img 标签的 src 中？

Answer 1

这是我在 React 项目中做类似事情时所做的事情。

1) 假设如下：

• 我们从 API 获得的响应不是 BASE64 编码的
• 请求中未指定responseType
• png 是响应

响应数据将如下所示：

角色看起来不友好。

2) 改变responseType

• 在请求中设置responseType:“arraybuffer”

响应现在将在响应数据中包含 arrayBuffer

然后可以将响应转换为 base64

let base64ImageString = Buffer.from(response.data, 'binary').toString('base64')

如果您想将其显示在 img 标签上，请在 Base64 字符串前面添加data:image/png;base64

let srcValue = "data:image/png;base64,"+base64ImageString

但就您而言，您似乎只获取字符串形式的文件名，而不是文件本身。

Answer 2

如果您的应用程序中有图像（资产文件夹或其他文件夹），您可以这样显示它

<img src={`assets/${coverImage}`}>

否则图像应该以 base64 格式从 API 发送，然后您就可以像这样简单地显示它。

data = "base64 image"
<img src={`data:image/jpeg;base64,${data}`} />