从MongoDB加载图片失败，报错data:image/png;base64,[object Object]

从MongoDB读取数据渲染HTML表格时，图片无法正常显示，图片src属性最终显示为data:image/png;base64,[object Object]。

出现[object Object]的核心原因是：前端将对象类型的图片数据直接拼接到了base64格式的字符串中，说明图片的base64数据在存储、后端返回或前端读取环节没有被正确处理为字符串类型。

1. 检查后端存储逻辑（确保存入MongoDB的是纯base64字符串） #

如果后端使用异步方法读取文件转base64，未正确等待异步结果会导致存入数据库的是Promise对象而非字符串：

// 错误示例：未等待异步操作完成，存入了Promise对象
const imgBase64 = fs.readFile(file.path, { encoding: 'base64' });
// 正确示例：用async/await等待异步读取完成，生成纯字符串
async function saveToDB(file) {
  const imgBuffer = await fs.promises.readFile(file.path);
  const imgBase64 = imgBuffer.toString('base64');
  // 将imgBase64字符串存入MongoDB的对应字段
}

验证：直接查看MongoDB中的目标文档，确认图片字段存储的是纯base64字符串，而非[object Object]或Promise相关内容。

2. 检查后端GET接口返回逻辑（确保返回的是纯字符串） #

如果后端返回数据时，将base64字符串包裹在了对象中，前端直接读取会拿到对象：

// 错误示例：返回嵌套对象
res.json({ data: { image: { base64: imgBase64 } } });
// 正确示例：直接返回base64字符串
res.json({ data: { image: imgBase64 } });

验证：调用GET接口，查看返回的JSON数据，确认图片字段是纯字符串类型。

3. 检查前端渲染逻辑（确保读取的是字符串值） #

如果后端确实返回了嵌套对象，前端需要正确读取对象内的字符串字段：

// 错误示例：直接拼接对象
const imgSrc = `data:image/png;base64,${item.image}`;
// 正确示例1：如果后端返回纯字符串，直接拼接
const imgSrc = `data:image/png;base64,${item.image}`;
// 正确示例2：如果后端返回嵌套对象，读取对应字段
const imgSrc = `data:image/png;base64,${item.image.base64}`;

验证：前端console.log拿到的图片数据，确认其类型为字符串后再进行拼接。

内容的提问来源于stack exchange，提问作者Osemu Aimiosior