如何显示缓冲图像

时间:2017-10-24 14:38:13

标签: mysql node.js image reactjs

我正在创建一个"加载图片" ReactJS中的组件。我的组件将加载的映像存储在内存中,并将其发送到使用npm" file-loader"的节点服务器。

图像作为缓冲区<Buffer 89 12 00 .... >

到达服务器

我将尝试将缓冲区保存到MySQL,但如果数据库插入成功,则需要在浏览器中将图像显示为缩略图。

如何在broswer中显示缓冲图像?

1 个答案:

答案 0 :(得分:1)

我使用的解决方案是将缓冲区转换为base64并使用<img />标记显示它:

const buffer = someData // e.g., <Buffer 89 50 4e ... >
const b64 = new Buffer(buffer).toString('base64')
const mimeType = some_type // e.g., image/png

然后在我的React组件中,我渲染一个图像标签:

<img src={`data:${mimeType};base64,${b64}`} />

更多信息:https://css-tricks.com/data-uris/