將從服務器接收到的二進制圖像數據轉換為<img>沒有 base64

Question

由於沒有可靠的方法將自定義請求標頭添加到 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)
  }
}