How to convert image data response to Image base64?

Question

this is my api

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

when I am testing this in postman I am getting Image..But how I can do with axios. I am getting very long string(like �PNG...) right now with Axios

So how I can use that response to show the image..

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

Also getting error when try to run btoa

DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

HTML

 <img src={ImageServer}/>

`https://static.xx.fbcdn.net/rsrc.php/v3/yN/r/EWLVhDVJTum.png` this is png image — Wang Liang, May 04 '21 at 18:04
yes it's not but I want to convert it base64 so I can show it on image src — sanket kheni, May 04 '21 at 18:05

Wang Liang · Accepted Answer · 2021-05-04T18:12:56.393

4

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

edited May 04 '21 at 18:12

answered May 04 '21 at 18:05

Wang Liang

4,244
6
22
45

https://stackoverflow.com/questions/42785229/axios-serving-png-image-is-giving-broken-image – Wang Liang May 04 '21 at 18:06
So why not close this question as duplicate instead of copy/pasting the code from another answer? Am I missing something? – Roko C. Buljan May 04 '21 at 18:08
URL.createObjectURL is not a function – sanket kheni May 04 '21 at 18:10
please use `window.URL.createObjectURL` – Wang Liang May 04 '21 at 18:12
Can I save this image locally ?? as base64 – sanket kheni May 04 '21 at 18:15
to the local storage – sanket kheni May 04 '21 at 18:15
I think, that is impossible – Wang Liang May 04 '21 at 18:49

How to convert image data response to Image base64?

1 Answers1