[Vuejs]-Displaying an image saved in a variable in Vue 3

by

0👍

✅

Your network tab is a bit misleading. What the GET actually retrieves is the raw image data. The network tab is just generating a preview based on the data. Assigning this data directly to the src attribute of an img element will not work. src only accepts URLs. You need to convert your response

async getImage() {
  const response = await axios.get(
    this.$hostname + "img?id=" + this.song.pk,
    { responseType: "blob" }
  );
  this.image = URL.createObjectURL(response.data);
},

Leave a comment