Help needed with Vuetify and Vuejs

[winstoncwang]

Hi all,
I have two questions that I can’t seem to figure out.

1. The issue that I’m facing is with my that fetches the same image multiple times when the source of the URL is identical.

<v-carousel
 cycle
 hide-delimiter-background
 show-arrows-on-hover
 elevation=”12”
 class=”rounded”
>
  <v-carousel-item v-for=”title in titles”>
    <v-img :src="getImageUrl(title.image)" :lazy-src="getLowResUrl(title.image)" height="95%">
            <v-sheet color="transparent" height="100%">
            </v-sheet>
          </v-img>
  </v-carousel-item>
</v-carousel>

methods: {
    getImageUrl(imageName) {
      //let url = location.origin + "/images/" + imageName;
      let url = serverURL+imageName;
      return url;
    },
    getLowResUrl(imageName){
      let url = serverURL+ imageName;
      return url;
    }

Expected log:

An image request for getLowResURL() and a second request for getImageURL()

Actual Log:

An image request for getLowResURL(), a second request for Vuetify(VImg.ts initiator) and a third request for getImageURL().

This is extremely confusing as to why a second request is made to the same URL through VImg.ts.

2. Another problem is preloading the images in the . I have tried ‘eager’ attribute in and , this initially loads all the images, but later reloads all the images one-by-one again when the carousel cycles through them again.

Thank you for taking your time to go through my problems.