如何通过JavaScript将Flask API返回的PNG图片显示到HTML前端？

问题根源 #

你当前的AJAX请求默认把二进制图片数据解析成了字符串，导致后续转Base64时数据损坏，所以图片无法正常渲染。需要正确处理二进制响应数据。

方案一：修改AJAX请求处理二进制数据 #

调整$.ajax配置，指定响应类型为blob，再通过URL.createObjectURL生成图片可识别的临时URL：

// figure image
$.ajax({
  type: "GET",
  url: `/international/figure/${data_result["id"]}/png`,
  xhrFields: {
    responseType: 'blob' // 明确要求返回二进制Blob类型数据
  },
  success: function (blobData) {
    const graph = document.createElement("img");
    // 生成临时URL供img标签使用，比转Base64更高效
    graph.src = URL.createObjectURL(blobData);
    // 图片加载完成后释放临时URL，避免内存泄漏
    graph.onload = function() {
      URL.revokeObjectURL(graph.src);
    };
    document.getElementById("imageContainer").appendChild(graph);
  }
});

方案二：直接使用img标签（更简洁） #

不需要AJAX，直接把API地址赋值给img的src属性，浏览器会自动处理二进制图片的加载：

<div id="imageContainer"></div>
<script>
  const graph = document.createElement("img");
  graph.src = `/international/figure/${data_result["id"]}/png`;
  document.getElementById("imageContainer").appendChild(graph);
</script>

补充：如果必须使用Base64格式 #

若业务要求必须转成Base64，可以通过FileReader处理Blob数据：

$.ajax({
  type: "GET",
  url: `/international/figure/${data_result["id"]}/png`,
  xhrFields: {
    responseType: 'blob'
  },
  success: function (blobData) {
    const reader = new FileReader();
    reader.onload = function(e) {
      const graph = document.createElement("img");
      graph.src = e.target.result; // 结果为base64格式的dataURL
      document.getElementById("imageContainer").appendChild(graph);
    };
    reader.readAsDataURL(blobData);
  }
});

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