0

I am learning react and I am trying to fetch a image file from a retsfull API and display the image. I am converting the responce file in a blob format and try to read it with file reader and then set the result on a state variable, when I do that I get a broken image in react. Bellow is the code:

getData() {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('load', () => {
      var myblob = new Blob([xhr.response], {
        type: ["image/png", "image/jpeg", "image/gif"]
      });
      let reader = new FileReader()
      reader.onloadend = () => {
        this.setState({
          postPicture: myblob,
          postPicturePreview: reader.result
        })
      }
      reader.readAsDataURL(myblob)
    })
    xhr.open('GET','https://DigitalSelfassuredCrash.kirilkuzmanovsk.repl.co')
    xhr.send()
    }

Can someone check this, I have tried to find a solution but I am stuck.

thanks

n2kin
  • 3
  • 3
  • Does this answer your question? [Fetch image from API](https://stackoverflow.com/questions/50248329/fetch-image-from-api) – Max Dec 06 '19 at 14:28
  • no, it displays the data like string but it is giving me an broken image – n2kin Dec 11 '19 at 10:52

0 Answers0