Flask后端返回BLOB图片至JS前端显示问题求助

核心问题定位 #

开发者工具能预览到图片，说明后端返回的图片数据本身没问题，问题出在前端未正确将响应数据转换为<img>标签可识别的格式。

具体解决步骤 #

1. 修正前端JS响应处理逻辑 #

发起请求获取图片时，需将响应转为Blob对象，再通过URL.createObjectURL()生成<img>可识别的临时URL：

// fetch请求示例
fetch('/get-image', { method: 'POST', body: formData })
  .then(response => response.blob()) // 关键：将响应转为Blob类型
  .then(blob => {
    const imgUrl = URL.createObjectURL(blob);
    document.getElementById('image_data').src = imgUrl;
    // 可选：页面卸载时释放URL，避免内存泄漏
    window.addEventListener('unload', () => URL.revokeObjectURL(imgUrl));
  })
  .catch(err => console.error('加载图片失败:', err));

若用XMLHttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/get-image', true);
xhr.responseType = 'blob'; // 必须设置响应类型为blob

xhr.onload = function() {
  if (this.status === 200) {
    const blob = this.response;
    const imgUrl = URL.createObjectURL(blob);
    document.getElementById('image_data').src = imgUrl;
  }
};
xhr.send(formData);

2. 验证后端数据完整性 #

确认后端读取BLOB时未截断数据：

# Flask后端读取BLOB示例
def get_image():
    conn = get_db_connection()
    cur = conn.cursor()
    cur.execute('SELECT image_blob FROM images WHERE id = ?', (request.form['image_id'],))
    image_data = cur.fetchone()[0]
    cur.close()
    conn.close()
    # 确保返回完整的二进制字节流
    return Response(image_data, mimetype='image/png')

检查image_data是否为完整的二进制字节，避免读取时出现编码或截断问题。

3. 确认<img>标签状态 #

• 检查CSS是否将标签设置为display: none或visibility: hidden
• 添加alt属性辅助排查：<img id="image_data" src="" alt="待加载图片">

替代方案：使用Data URL #

也可将Blob转为base64格式的Data URL赋值给src：

fetch('/get-image')
  .then(res => res.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.onload = e => {
      document.getElementById('image_data').src = e.target.result; // 格式为data:image/png;base64,...
    };
    reader.readAsDataURL(blob);
  });

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