将图像存储在MongoDB中并在React.js中显示

Question

图像存储在Mongo中：

const Posts = new Schema({
    postImg: {
      data: Buffer,
      type: Buffer,
      contentType: String
    }
})

数据库文档中的内容如下：

"postImg" : { "$binary" : "/9j/4AAQS.blaBla.long.binary.string.."}

当图像被提取到客户端时，它看起来像这样：

{data: Array(84106) [ 255, 216, 255, … ]
type: "Buffer"}

在这种情况下，图像应显示为：

<img src={`data:image/png;base64,${props.postImg}`} alt="a"/>

但是那行不通，alt被显示了。 我尝试了{props.postImg.data}，但还是没有。

有帮助吗？

P.S。我将node和express用于服务器端，并将multer包用于图像上传

Answer 1

该图像似乎是作为node.js Buffer类型提取的，然后被编码为字节数组并发送给客户端。您需要在客户端上使用base64字符串。

最简单的方法是将缓冲区转换为后端的base64字符串，然后将其发送给客户端。例如

const post = await getPostImgFromDatabase();
res.send({
  ...post
  postImgBase64: Buffer.from(post.postImg).toString('base64')
});

然后在客户端上

<img src={`data:image/png;base64,${props.postImgBase64}`} alt="a"/>