如何将图像数据响应转换为图像Base64？

Question

这是我的API

https://besticon-demo.herokuapp.com/icon?url=facebook.com&size=80..120..200

当我在Postman中测试时，我得到了一张图片..但我如何使用Axios呢？ 现在使用Axios会返回一个非常长的字符串（类似于�PNG...）

那么我该如何使用该响应来显示图片呢？

   axios.get(RequestURL, { withCredentials: false })
                .then(function (response) {
                    // handle success
                    console.log(response)
                    var b64Response = btoa(response.data) 
                    setImageServer('data:image/png;base64,' + b64Response) // not showing image
                })

尝试运行btoa时也出现了错误：

DOMException: 在“Window”上执行“btoa”失败：要编码的字符串包含在Latin1范围之外的字符。

HTML

 <img src={ImageServer}/>

- sanket kheni

---

这不是base64图像。 - Wang Liang

https://static.xx.fbcdn.net/rsrc.php/v3/yN/r/EWLVhDVJTum.png 这是一张PNG图片。 - Wang Liang

是的，它不是Base64编码，但我想将其转换为Base64编码，以便可以在图像src上显示。 - sanket kheni

no need convert base64 - Wang Liang

Answer 1

axios.get('RequestURL', { responseType: 'arraybuffer' })
.then(response => {
      let blob = new Blob(
        [response.data], 
        { type: response.headers['content-type'] }
      )
      let image = window.URL.createObjectURL(blob)
      return image
    })

axios.get('RequestURL', {responseType: 'blob'})
.then(response => {
  let imageNode = document.getElementById('image');
  let imgUrl = URL.createObjectURL(response.data)
  imageNode.src = imgUrl
})

- Wang Liang

---

https://dev59.com/bZ_ha4cB1Zd3GeqP7_tp - Wang Liang

那么，为什么不将此问题关闭为重复，而不是从另一个答案中复制/粘贴代码呢？我有什么遗漏的吗？ - Roko C. Buljan

URL.createObjectURL 不是一个函数。 - sanket kheni

请使用 window.URL.createObjectURL。 - Wang Liang

将数据存储到本地存储中。 - sanket kheni