reactjs - 我的回复包含一个 png，我如何在 react 中显示图像，因为它不是一个 url？

Question

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

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

Answer 1

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

1) 假设如下:

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

响应数据将如下所示:

带有看起来不友好的字符。

2) 响应类型改变

• 在请求中设置responseType: "arraybuffer"

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

然后可以通过

将响应转换为base64

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

如果你想在 img 标签上显示它，那么将 data:image/png;base64, 添加到 Base64 字符串

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

But in your case, it seems like you are only getting the file name as a string and not the file itself.