如何在 React.js 中将类型为数据缓冲区的数据转换为图像

Question

你好，我有一个类型为buffer的图像数据，这些数据是一张图像，如何将我的缓冲区数据转换成一张图片？

当我向API发出请求时，它会显示以下数据：

有什么建议吗？

后端使用node.js sequelize MYSQL制作，前端使用react.js。

我有以下示例：

https://codesandbox.io/s/happy-christian-z4m1x?file=/src/LoadingData.js

通过这种方式，可以从MySQL数据库检索数据

这是注册的方式

而这是存储图像的方式

- Mauricio Cartagena

---

这篇帖子非常有帮助，它展示了如何通过URL和二进制数据来显示图像。 - Tolulope Durosinmi

Answer 1

首先，您需要将Buffer转换为base64字符串。

const base64String = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));

其次，您需要将字符串用作 img 标签的 src 属性。

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

我假设你正在使用react，因此建议将base64String保存在组件的state中并使用它。

- xom9ikk

---

请看下一张图片 => 图片 - Mauricio Cartagena

尝试在该行开头添加 data:image/png;base64,。 - xom9ikk

@MauricioCartagena，我可以请你展示一下你正在生成缓冲区的后端部分代码吗？以及你正在将哪种类型的文件写入缓冲区。谢谢。 - xom9ikk

`const showQuestionShape = async ( req, res = response ) => { const preguntaFormas = await PreguntasFormas.findAll(); res.status( 200 ).json({ ok:true, msg: 'List shape questions', preguntaFormas, });};` - Mauricio Cartagena

显示Mysql saveDataBase。 - Mauricio Cartagena