[Vuejs]-Display image from API in JS/Vue.js 3

by

1👍

✅

It’s very likely that in your fetch you are trying to parse json, while you should parse as blob.

fetch(url, options)
.then(res => res.blob())
.then(res => //do your thing here)
.catch(error => console.log(error))

-1👍

Since I am using Axios, it was necessary to change the responseType to "blob":

try {
    const response = await api.post(
      url,
      {
        params
      },
      {
        responseType: "blob"
      }
    );

    return URL.createObjectURL(
      new Blob([response.data], { type: "image/png" })
    );
} catch (error) {
    console.error(error);
}

So all you had to do was include the return in the src attribute of the image.

Leave a comment