如何从MongoDB获取图片src属性至外部JavaScript

问题根源 #

1. 你用$('.test').attr('data-test-value')拿到的是JSON字符串，不是可直接访问属性的对象，直接写source.image会报错。
2. 拼接src时末尾多了个多余的>，会导致图片路径格式无效。
3. 浏览器环境下没有Buffer.toString('base64')方法，如果后端没把image.data转成base64字符串，前端没法直接处理二进制数据。

修正方案 #

步骤1：解析JSON字符串

先把data属性里的字符串转成JS对象，才能访问里面的contentType和data属性。

步骤2：正确拼接图片路径

移除多余符号，确保data URI格式符合规范。

步骤3：后端提前处理base64

如果image.data是原始二进制数据，必须在后端完成base64编码后再序列化到JSON里，前端直接用就行。

修改后的代码示例 #

HTML部分（新增要修改的img元素）

<body>
  ... 
  <div class='test' data-test-value='<%= JSON.stringify(image) %>'></div>
  <!-- 新增一个img元素用来显示图片 -->
  <img id="target-image" alt="加载的图片">
  <script src="/js/external.js"></script>
</body>

external.js代码（jQuery版本）

// 解析JSON字符串为对象
const imageData = JSON.parse($('.test').attr('data-test-value'));
// 拼接正确的data URI
const imgSrc = `data:image/${imageData.image.contentType};base64, ${imageData.image.data}`;
// 设置img的src属性
$('#target-image').attr('src', imgSrc);

原生JS版本（无需jQuery）

const testDiv = document.querySelector('.test');
const imageData = JSON.parse(testDiv.dataset.testValue);
const targetImg = document.getElementById('target-image');
targetImg.src = `data:image/${imageData.image.contentType};base64, ${imageData.image.data}`;

额外注意 #

如果后端返回的image.data还没转成base64，一定要在后端处理（比如Node.js里用buffer.toString('base64')），因为浏览器无法直接处理Node.js的Buffer对象，前端调用toString('base64')会失效。

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