时间戳

首页 > 解决方案 > 如何使用 Reactjs 从 mongodb 显示图像

mongodb - 如何使用 Reactjs 从 mongodb 显示图像

问题描述

我已经像这样在 Mongodb 中保存了我的图像：

 "img": {
    "data": "<Binary Data>",
    "contentType": "image/png"
}

我尝试使用以下代码在 ReactJS 中显示它：

..{products.map(product => {
   <img src= {product.img} />

但什么都没有显示。任何想法请修复它。

标签： mongodbreactjsreact-redux

解决方案

当您需要一个 url 时，您正在尝试使用二进制数据在 src 属性中显示您的图像。

如果它是二进制数据，您需要像这样显示它并告诉您的组件您正在传递二进制数据

<img src={`data:image/png;base64,${product.img.data}`} />

推荐阅读