时间戳

首页 > 解决方案 > 如何将图像数据响应转换为 Image base64？

javascript - 如何将图像数据响应转换为 Image base64？

问题描述

这是我的 api

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

当我在邮递员中测试这个时，我得到了 Image..但是我怎么能用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}/>

标签： javascriptreactjsaxios

解决方案

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
})

推荐阅读