无法渲染MongoDB中存储为Buffer的图片 EJS开发场景下遇阻

• 场景适配偏差：你参考的教程流程是服务端直接查询MongoDB拿到原生Buffer实例，直接传给模板渲染；但你现在的链路是「API服务返回数据 → 前端路由用axios跨端口拉取数据 → 再传给EJS模板渲染」，原生Node Buffer经过JSON序列化传输后，会被转成{ type: "Buffer", data: [十进制数字数组] }的普通对象，丢失原本的Buffer原型方法。你在EJS里调用.toString('base64')的时候，实际执行的是普通对象的默认toString逻辑，会返回[object Object]，拼出来的图片地址完全无效，自然没法渲染。
• 模板格式问题：EJS模板里拼接base64内容时，在data URI的位置换行了、带了缩进空格，这些无效字符会直接混进图片地址，导致浏览器无法解析资源。

• 适配跨接口的返回格式：在5000端口的API服务端，查询到MongoDB的Buffer数据后，提前转成base64字符串再返回，不要把原生Buffer透传到JSON响应里。示例代码：

  // API服务端处理图片字段的逻辑
  const therapistList = await Therapist.find({});
  const responseData = therapistList.map(therapist => ({
    id: therapist._id,
    name: therapist.name,
    title: therapist.title,
    qualification: therapist.qualification,
    experience: therapist.experience,
    image: {
      contentType: therapist.image.contentType,
      base64Content: therapist.image.data.toString('base64')
    }
  }))
  res.json(responseData)
  

• 调整EJS模板的拼接逻辑：去掉base64字符串前后的换行、缩进空白，确保data URI格式完全连续无间隔：

  <% for(let i = 0; i < therapists.length; i++) { %>
  <tr>
    <td><%= i + 1 %></td>
    <td>
      <img src="data:image/<%= therapists[i].image.contentType %>;base64,<%= therapists[i].image.base64Content %>" alt="头像" />
    </td>
    <td><%= therapists[i].name %></td>
    <td><%= therapists[i].title %></td>
    <td><%= therapists[i].qualification %></td>
    <td><%= therapists[i].experience %></td>
  </tr>
  <% } %>
  

• 快速定位验证：你可以先查看页面上渲染<td><%=therapists[i].image.data%></td>的输出内容，如果显示的是{ type: 'Buffer', data: [137, 80, 78, ...] }这类数组结构，就可以确认是JSON序列化导致的Buffer结构变形，不是图片上传、存储环节的问题。

内容的提问来源于stack exchange，提问作者NIHIR AGARWAL