如何在HTML中展示存储在MongoDB中的二进制格式图片

你当前直接将MongoDB返回的Binary类型对象传入模板渲染，模板默认会调用对象的toString()方法，最终得到的是[object Object]字符串，拼接后的data URL完全不符合规范，才会触发net::ERR_UNKNOWN_URL_SCHEME错误。

要正确渲染图片，需要把MongoDB的Binary数据转换成base64字符串，你可以选择在服务端处理或者前端处理，两种方案如下：

方案1：服务端转换（更推荐） #

在查询到MongoDB数据后、返回给前端之前完成转换，这里以Node.js环境为例：

• 取出image字段的Binary数据，先转成Buffer再转为base64字符串
  示例代码：

// 从MongoDB查询得到person文档后执行转换
person.image = person.image.buffer.toString('base64');
// 再将处理后的person数据返回给前端

前端模板无需修改，沿用原有写法即可正常渲染：

<div> <img src="data:image/png;base64,{{person.image}}"/></div>

方案2：前端转换 #

如果不方便修改服务端逻辑，也可以在前端接收到数据后完成转换，浏览器环境示例代码如下：

// 假设接口返回的person对象中image为MongoDB的Binary结构
const uint8Array = new Uint8Array(person.image.buffer);
let binaryStr = '';
for (let i = 0; i < uint8Array.byteLength; i++) {
  binaryStr += String.fromCharCode(uint8Array[i]);
}
const base64Image = btoa(binaryStr);
// 将base64Image赋值给模板对应的变量即可

• 如果存储的图片包含多种格式，建议存数据时同步保存imageType字段（如image/png、image/jpeg），渲染时动态替换data URL中的格式标识，避免出现格式不兼容无法展示的问题
• 若图片体积过大，不建议直接存储在MongoDB文档字段中，可改用GridFS存储或者对象存储服务，文档仅保留访问地址，页面加载性能会更好。

内容的提问来源于stack exchange，提问作者Random Dev