0

I have a Vue app. In one component, I am trying to display several svg images like that:

<v-col v-for="image in myImages" :key="image.id" cols="3" sm="6" md="3">
 <v-img :src="`data:image/svg+xml;base64, ${image.data}`"aspect-ratio="1"></v-img>
</v-col>

Here is my post request:

this.getmyImages({
  payload
})
.then((response) => {
  response.data.data.svg_list.forEach((element, index) => {
    this.image_index = this.image_index + 1;
    this.myImages.push({id: image_index, data: element})
  });
})

Unfortunately doing this slows down my app a lot. I have tried to do this with png-base64 and I didn't see any slowdown problems. So I want to change type of image. How can I do this or what else can I do?

AlwaysJunior
  • 55
  • 5
  • 2
    Where is `image.data` coming from? Instead of converting it on the client side, which requires you to render the SVG anyway and then covert it to png using canvas, you’re better off fixing the problem at the source. – Terry Feb 01 '23 at 19:56

0 Answers0