MySQL LONGBLOB类型图片转BLOB后如何在img src中正常显示？

咱们先捋清楚问题：你把MySQL里LONGBLOB类型的图片数据通过接口返回成JSON，然后前端想用Blob URL在img标签里展示，但图片显示异常。这事儿的核心问题出在JSON没法直接传输二进制数据——当后端把LONGBLOB的二进制序列化成JSON时，二进制会被当成UTF-8字符串处理，原始的字节信息直接丢了，前端再转Blob自然还原不出正确的图片。

从你提供的截图来看：

当前图片显示情况：[图片无法正常加载，呈现损坏或空白状态]
picture字段数据：[显示为一堆乱码字符串，这是二进制数据被错误编码为文本后的结果]

怎么解决？ #

第一步：先改后端（最关键） #

JSON是纯文本格式，不能直接带二进制，所以后端接口SelectLapbook必须把LONGBLOB的图片数据转成Base64编码字符串后再返回JSON。举个Java后端的例子（你可以根据自己的后端语言调整）：

// 假设从数据库取出的picture是byte[]类型
String base64Picture = Base64.getEncoder().encodeToString(picture);
// 把这个base64Picture放到返回的JSON对象里

这样前端拿到的lapbooks[i].picture就是标准的Base64字符串，不是乱码了。

第二步：前端修改（两种方案任选） #

方案一：直接用Data URL（简单省心）

不用搞Blob那一套，直接把Base64字符串拼成Data URL给img的src就行：

var selectLapbooks = function () { 
  var request = new XMLHttpRequest(); 
  request.open("GET", "SelectLapbook", false); 
  request.send(); 
  if (request.status === 200) { 
    var response = request.responseText; 
    var lapbooks = JSON.parse(response); 
    var element = document.getElementById("lapbooks"); 
    element.innerHTML = ""; 
    for (var i = 0; i < lapbooks.length; i++) { 
      // 这里要注意图片类型，比如你的图片是PNG就写image/png，是JPG就写image/jpeg
      var imgSrc = `data:image/png;base64,${lapbooks[i].picture}`;
      element.innerHTML += `<a href="#"><img class='card-img-top' src='${imgSrc}' alt='Lapbook图片'></a>`; 
    } 
  } 
};

方案二：转Blob后用Object URL（适合大图片）

如果图片特别大，Data URL可能有性能问题，那就把Base64解码成字节数组再转Blob：

// 先写个Base64转Uint8Array的工具函数
function base64ToUint8Array(base64) {
  var binaryString = window.atob(base64);
  var bytes = new Uint8Array(binaryString.length);
  for (var i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes;
}

var selectLapbooks = function () { 
  var request = new XMLHttpRequest(); 
  request.open("GET", "SelectLapbook", false); 
  request.send(); 
  if (request.status === 200) { 
    var response = request.responseText; 
    var lapbooks = JSON.parse(response); 
    var element = document.getElementById("lapbooks"); 
    element.innerHTML = ""; 
    for (var i = 0; i < lapbooks.length; i++) { 
      var imgBytes = base64ToUint8Array(lapbooks[i].picture);
      // 同样要指定正确的图片MIME类型
      var blob = new Blob([imgBytes], { type: 'image/png' }); 
      var imgSrc = window.URL.createObjectURL(blob);
      element.innerHTML += `<a href="#"><img class='card-img-top' src='${imgSrc}' alt='Lapbook图片'></a>`; 
      // 记得在图片不用的时候释放URL，避免内存泄漏
      // window.URL.revokeObjectURL(imgSrc);
    } 
  } 
};

额外提醒 #

• 一定要确认图片的MIME类型，如果后端能把类型一起返回就更完美了，不然得根据你实际存储的图片格式调整。
• 如果没法改后端的话，前端基本救不了——因为二进制转字符串的时候已经丢了信息，这时候必须让后端配合改成Base64编码返回。

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