如何使用 axios 从 mongo 获取图像并使用 react 显示它们答案

【问题标题】：how to get images from mongo with axios and display them with react如何使用 axios 从 mongo 获取图像并使用 react 显示它们
【发布时间】：2021-04-06 03:02:57
【问题描述】：

服务器路由：

router.get('/images', async (req, res) => {
const image = await Image.findOne({})

res.json(image)
})

Axios：

const image = await Axios.get("http://localhost:5000/images/images")
setAvailableFile(image.data.img.data)

如果 console.log 可用文件我得到：

img:
   contentType: "image/jpeg"
   data: {type: "Buffer", data: Array(11615)}
   __proto__: Object
   name: "download.jpg"
   __v: 0
   _id: "5feb25dff4b7b43344a92952"

反应：

  <div>
      {availableFile && availableFile.data}
  </div>

现在的问题是，当我尝试显示图像时，我得到如下内容：

255,224,0,16,74,70,73,70,0,1,1,0,0,1,0,1,0,0,255,219,0,132,0,9,6,7,16,16 ,15,21,16,15,15,16,21,16....

有什么想法吗？提前致谢！

【问题讨论】：

标签： reactjs mongoose axios multer

【解决方案1】：

试试这个，如果二进制数据表示为 base64 字符串：

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

参考：How to display binary data as image in React?

你为什么要使用 div 来显示图像？

【讨论】：

感谢您的回答！！但我不确定如何在我的代码上实现这一点..
看这里的答案先将二进制数据转换为base64

【解决方案2】：

好的，我想通了，我会分享解决方案。为了完成这项工作，我需要做两件事：

第一个是@Viet 所说的。

然后我需要将 {image.img.data.toString('base64')} 添加到 get 请求中：

router.get('/images', async (req, res) => {
      const image = await Image.findOne({})

      res.json(image.img.data.toString('base64'))
})

【讨论】：