将从服务器接收到的二进制图像数据转换为不使用 base64 的 <img>

Question

由于没有可靠的方法将自定义请求 headers 添加到 img src，我正在尝试使用 ajax.

手动下载图像

代码如下：

const load = async () => {
  loaded.value = false

  try {
    const res = await axios.get(src.value, {
      headers: { 'X-Chat-Session': sessid }
    })

    console.log(res.data) // "����\u0002IExif\u0000\u0000MM\u0000*\u0000\u0000\u0000\u0008\u0000\u0007\u0001\u0000\u0000\u0003\u0000\u0000\u0000... 

    loaded.value = true
    emit('loaded')
  } catch (e) {
    emit('loadingError', e)
  }
}

我想做的是

<my image container>.appendChild(new Image(res.data))

如果我可以将二进制响应放入已存在的 <img> 元素的 src 属性中，那就更好了。

请记住

服务器端不受我控制
无法使用服务人员
Base64 操作非常不受欢迎

就是这样。谢谢。

Answer 1

试试这个：

const load = async () => {
  loaded.value = false

  try {
    const res = await axios.get(src.value, {
      responseType: 'blob', 
      headers: { 'X-Chat-Session': sessid }
    })

    console.log(res.data)
    const url = URL.createObjectURL(res.data)
    <image element>.src = url;

    loaded.value = true
    emit('loaded')
  } catch (e) {
    emit('loadingError', e)
  }
}

将从服务器接收到的二进制图像数据转换为不使用 base64 的 <img>

Convert binary image data received from the server to <img> without base64

javascript

html

ajax

image