如何在React前端通过Mongoose从MongoDB展示图片

解决MongoDB存储图片后在前端标签展示的问题 #

我刚搞定了这个困扰了我一阵的问题——把存在MongoDB里的图片通过<img>标签在页面展示出来，分享一下具体的实现细节：

核心思路 #

我们存进MongoDB的是图片的二进制Buffer数据，从后端接口取回来后是一个数字数组，得把它转成Base64格式，才能用data URI的方式在img标签里展示。

具体实现代码 #

1. 获取并转换图片数据（React组件示例）

在组件挂载时发送GET请求，拿到数据后处理成Base64：

componentDidMount() {
  const PATH = "http://localhost:8080/apii/items/getitems";
  axios.get(PATH)
    .then(res => {
      // 注意这里的res.data[0].data.data对应数据库里的二进制数字数组
      const pictureBuffer = new Buffer(res.data[0].data.data, 'binary');
      const picture64Bit = pictureBuffer.toString('base64');
      this.setState({ picture: picture64Bit });
    })
    .catch(err => console.log(err));
}

2. 在页面中展示图片

把转换后的Base64字符串拼接到data URI中，直接作为img的src属性：

<img src={`data:image/png;base64,${this.state.picture}`} alt="存储的图片" />

关键注意点 #

• 要对应好后端返回的数据结构，确保你取到的是数据库里存储的那串二进制数字数组（也就是你控制台看到的那堆随机数字列表）；
• 转换时要先用Buffer处理成二进制，再转成Base64，这样才能和MongoDB里的存储格式对应上；
• 注意图片的contentType要和你存进数据库时一致（比如这里用的是image/png，如果是JPG就改成image/jpeg）。

内容的提问来源于stack exchange，提问作者Mike Smith Alexiss