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

Question

服务器路由：

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 availableFile 我得到：

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....

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

Answer 1

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

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

参考：

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

Answer 2

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

第一个是@Viet说的

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

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

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

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

how to get images from mongo with axios and display them with react

mongoose

reactjs

multer

axios