v-carousel 在移动到下一个项目时跳过

Question

每当 v-carousel 移动到卷轴中的下一个图像时，它会在加载图像之前缩小，从而导致轮播“跳过”。有什么办法可以防止这种情况发生吗？也许通过预加载图像？静态图像来自使用 asyncData 的父 nuxt 组件，所以我认为它已经被加载了。

轮播组件：

<template>
<v-container class="hero-wrapper">
  <v-carousel
    cycle
    hide-delimiters
    height="auto"
    >
    <v-carousel-item
      v-for="(item,i) in heroImages"
      :key="i"
      class="pb-0 mb-0"
      :href="item.link"
      >
      <img :src="item.image" class="hero-image">
    </v-carousel-item>
  </v-carousel>
</v-container>
</template>

<script>
export default {
    props: ["heroImages"]
}
</script>

Answer 1

尝试将eager 属性添加到v-carousel-item。

<v-carousel-item
    v-for="(item,i) in heroImages"
    :key="i"
    eager
    class="pb-0 mb-0"
    :href="item.link"
>