Vuetify carousel image loading

Question

I want to use the vuetify's carousel to display some images. But on the first sliding, there is a white flash while transitioning, like the image was not loaded until it tries to render it.

<div id="app">
  <v-app id="inspire">
    <v-carousel>
      <v-carousel-item
        v-for="(item,i) in items"
        :key="i"
        :src="item.src"
      ></v-carousel-item>
    </v-carousel>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      items: [
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
        },
      ],
    }
  },
})

Demo where you can see what i'm talking about : https://codepen.io/gaalee89/pen/RwPQWXj

Is there a way to fixe this ? Thanks.

Answer 1

I found that the eager attribute is part of the solution, but not the whole solution, as it only seems to apply to nested content. Nest a v-img tag inside v-carousel-item with the eager attribute on both, then all images will preload.

<div id="app">
  <v-app id="inspire">
    <v-carousel>
      <v-carousel-item
        v-for="(item,i) in items"
        :key="i"
        eager
      >
        <v-img :src="item.src" height="100%" eager/>
      </v-carousel-item>
    </v-carousel>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      items: [
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
        },
      ],
    }
  },
})

Then you need need to adjust the layout, as the image content will behave differently. height="100%" on the v-img worked for me.