在Vue3-carousel中显示多个图像

Question

我在网上广泛搜索答案，但没有结果。

请好心人向我这个新手解释一下如何使用 Vue3-carousel 显示三个单独的图像？

我已经查看了 Vue3-carousel 文档，但如果解决方案存在，我没有看到它。

<template>
  <section class="productOverview">
    <Carousel :itemsToShow="3" :wrapAround="true">
      <Slide v-for="slide in 3" :key="slide">
        <div class="carousel__item">{{ slide }}</div>
      </Slide>
    </Carousel>
  </section>
</template>

我认为魔法发生在脚本区域的某个地方......

<script>
 import { defineComponent } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
    
 export default defineComponent({
  name: "Autoplay",
  components: {
    Carousel,
    Slide,
  },
});
</script>

提前致谢。

Answer 1

尝试使用图像网址创建数据对象：

export default defineComponent({
  name: "Autoplay",
  components: {
    Carousel,
    Slide,
  },
  data() {
    return {
      images: [{id: 1,url:'img1url'}, {id: 2,url:'img2url'}, {id: 3,url:'img3url'}]
    }
  }

然后我模板循环遍历图像

 <Slide v-for="(image, index) in images" :key="image.id">
    <img :src="getImage(image.url)" />
    <button v-if="slidesCount > 1" @click="deleteImage(index)">x</button>
  </Slide>

图像方法：

methods: {
  getImage(imagePath) {
    return require(imagePath);
  }
}

Answer 2

我遇到了同样的问题，在 Nuxt 3 中使用 vu3 carousel。我无法显示图像。如果我使用带有范围的幻灯片（如 vu3 轮播中的示例），它可以正常工作，但是当尝试使用图像时，它不起作用。