JavaScript在HTML中显示SQL BLOB图片失败，求助排查

常见原因及对应修复方案 #

1. BLOB数据格式不匹配

Blob构造函数要求第一个参数是二进制数据的数组（如Uint8Array），如果后端返回的e.Pic.data是普通数字数组或Base64字符串，直接传入会导致Blob无效。

• 如果e.Pic.data是数字数组/Uint8Array：
  修正Blob创建方式，确保传入的是数组包裹的Uint8Array：

  // 转成Uint8Array并包裹在数组中
  let blob = new Blob([new Uint8Array(e.Pic.data)], {type: "image/jpeg"});
  

• 如果e.Pic.data是Base64字符串：
  先解码Base64为二进制数组，再创建Blob（或直接使用Data URL更简便）：

  // 方式1：转Blob
  function base64ToBinary(base64Str) {
    const binaryStr = atob(base64Str);
    const uint8Arr = new Uint8Array(binaryStr.length);
    for (let i = 0; i < binaryStr.length; i++) {
      uint8Arr[i] = binaryStr.charCodeAt(i);
    }
    return uint8Arr;
  }
  let blob = new Blob([base64ToBinary(e.Pic.data)], {type: e.Pic.type || "image/jpeg"});
  
  // 方式2：直接用Data URL（更简洁）
  img.src = `data:${e.Pic.type || 'image/jpeg'};base64,${e.Pic.data}`;
  

2. 图片MIME类型错误

确保指定的type与实际图片格式一致：

• 避免用image/jpg，标准MIME类型是image/jpeg
• 如果后端返回了图片类型（比如e.Pic.type），优先使用该值，避免硬编码

3. 内存泄漏隐患（附加优化）

使用URL.createObjectURL后，记得在图片加载完成或页面卸载时释放资源：

img.onload = function() {
  URL.revokeObjectURL(url); // 释放内存
}

修复后的完整示例代码 #

假设e.Pic.data是数字数组：

output.dataBack.forEach(e => {
  // 修正Blob创建逻辑
  let uint8Data = new Uint8Array(e.Pic.data);
  let blob = new Blob([uint8Data], {type: e.Pic.type || "image/jpeg"});
  let url = URL.createObjectURL(blob);
  
  let div = document.createElement('div');
  div.className = 'contentSub'; // 替代setAttribute更简洁
  div.onclick = () => window.location.href = `product?id=${e.ZUTATENNR}`;
  
  let img = document.createElement('img');
  img.src = url;
  img.onload = () => URL.revokeObjectURL(url); // 清理资源
  
  div.appendChild(img);
  document.getElementById('contentOverview').appendChild(div);
  
  console.log('Pic data:', e.Pic);
  console.log('Object URL:', url);
});

关键排查步骤 #

1. 查看console.log(e.Pic)的输出，确认data的类型（数字数组/Base64/Uint8Array）
2. 检查浏览器控制台是否有资源加载错误（F12 -> 网络面板，查看图片请求的状态）
3. 验证Blob生成的URL是否有效：复制URL到新标签页，看能否打开图片

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