如何在前端img标签中展示Express服务端流式返回的图片

优先推荐方案：直接使用接口地址作为img src属性值 #

你的服务端代码逻辑完全正确，已经正确设置了Content-Type: image/jpg响应头，返回的是标准JPG格式的二进制图片流，浏览器原生支持直接将这类返回图片的接口地址填入img标签的src属性，不需要做任何额外的数据处理：

<img src="/image" alt="展示图片">

这个方案性能最高，没有转码损耗，适配所有主流浏览器。 #

备选方案：前端手动请求后渲染（适用于需要带自定义请求头鉴权的场景） #

如果你的接口需要携带token等自定义请求头，无法直接通过src属性访问，可以按以下方式处理：

fetch请求示例 #

fetch('/image')
  .then(res => res.blob())
  .then(blob => {
    const fileReader = new FileReader()
    fileReader.onload = () => {
      document.querySelector('img').src = fileReader.result
    }
    fileReader.readAsDataURL(blob)
  })

axios请求示例 #

需要额外指定响应类型为blob，避免axios默认按文本解析返回内容导致乱码：

axios.get('/image', {
  responseType: 'blob'
}).then(res => {
  const imgSrc = URL.createObjectURL(res.data)
  document.querySelector('img').src = imgSrc
  // 图片销毁/页面卸载时手动释放内存，避免内存泄漏
  // URL.revokeObjectURL(imgSrc)
})

之前操作失败的原因 #

你尝试base64、blob方案失败，核心原因是没有指定请求的响应类型为二进制格式，请求库默认按UTF-8文本解析图片二进制流，得到的就是你打印出来的乱码内容，无法正常转码为可识别的图片资源。

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