从 Node REST API 返回图像并在客户端的 img.src 中使用答案

【问题标题】：Return image from Node REST API and use in img.src on client-side从 Node REST API 返回图像并在客户端的 img.src 中使用
【发布时间】：2019-02-27 08:14:58
【问题描述】：

我在 MongoDB 中将图像存储为 base64 字符串。我创建了通过 id 获取图像的 Express 路由：

router.get('/:userId/images/:imgId', (req, res) => {
  Image.findOne(
    { _id: req.params.imgId },
    (err, img) => {
      if (err) {
        res.status(500).send('someErr');
      } else {
        var resultImg = Buffer.from(img.data, 'base64');
        res.writeHead(200, {
          'Content-Type': 'image/png',
          'Content-Length': resultImg.length
        });
        res.end(resultImg);
      }
    }
  );
});

客户端：

<img src={`api/users/${userId}/images/${imgId}`} />

我确信：

路径正确，服务器收到请求返回200响应
从 MongoDB 正确获取数据
base64 字符串是正确的（当我像https://codebeautify.org/base64-to-image-converter 一样将粘贴复制到验证器时，它正在工作）

为什么图片没有加载？

【问题讨论】：

尝试将res.end(resultImg) 更改为res.end(resultImg, 'binary');
@Amirmasudzarebidaki 它没有帮助
你看到this的回答了吗？没有帮助吗？
你有没有让这个工作？

标签： html node.js mongodb express mongoose

【解决方案1】：

确保输出的开头有这个字符串

<img src='data:image/png;base64,your base 64 goes here'/>

您可以通过复制输出并将其放入静态 html 中进行测试，看看它是否有效。所以可能这样的事情会有所帮助

<img src=`data:image/png;base64,{`api/users/${userId}/images/${imgId}`}`/>

【讨论】：

【解决方案2】：

您是否尝试过使用 AJAX 或 Fetch API 访问您的后端？之后，您可以将该 API 的响应加载到您的图像元素中

【讨论】：

你可以查看这个要点here