mern - 如何在 React.js 中将二进制数据转换为图像？

问题描述

我正在尝试显示我使用 node & express 在 mongoDB 中上传的图像。我在节点中获取图像但在反应中我无法显示图像，因为数据是二进制的。
响应数据：

{"data":{"type":"Buffer","data":

[137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,205,0,0,0,205,8,3,0,0,

0,44,98,4,91,0,0,1,59,80,76,84,69,255,255,255,32,31,31,244,202,177,156,218,

240,124,186,230,0,0,0,....

我尝试了以下代码进行转换，但没有成功。

function hexToBase64(str) {
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}

也试过这个

如何转换数据以在反应应用程序中显示？

标签： mern

我知道这是一个老问题，但有人会发现它很有用。

尝试将您的图像转换为 base64 字符串，例如

objImg.img = new Buffer.from(bitMap).toString("base64")

然后当您从请求中获取图像时，将您的状态设置为

setPreviewImg("data:image/png;base64," + result.img)

mern - 如何在 React.js 中将二进制数据转换为图像？

问题描述

解决方案

推荐阅读