How can I turn the data that is a image came from API to url to use in img tag in react Js-CodePudding

I have uploaded an image. Now, I have a download API that gives me this image as a data. The response looks like this:

the header of the response is like this:

Now the problem is that I want to show this image on the web page using img tag or anything else possible in react js. Passing the content to src attr shows nothing. Does anyone have any ideas? Is there any possible way?

CodePudding user response：

You should be able to use the FileReader to convert the response to base64 format which can be used in the src attribute:

// Request was successful, get image blob
const blob = await response.blob()

// Convert the blob to base64
const reader = new FileReader()
reader.readAsDataURL(blob)

// Get the converted image and set it where needed
reader.onloadend = () => {
    const base64Image = reader.result
    // Set the image to the src of the image tag or setState as you need
}

CodePudding user response：

This also worked for me other than the answer above:

const fetchImage = async () => {
fetch(apiUrl, {
  method: 'get',
  headers: new Headers({
    Authorization: `Bearer ${getCookie('accessToken')}`,
  }),
})
  .then((response) => response.blob())
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    setImageUrl(objectURL);
  });

};