Twitter bootstrap 无法将图像动态渲染到carousel Vuejs

我已经使用bootstrap vue设置了一个旋转木马。我使用for循环和对象数组来动态创建组件。在每张幻灯片中，我将包括一个文本和一个背景图像。我能够动态地呈现文本。但是，背景图像仅出现在第一张幻灯片上。对于后续幻灯片，将不再渲染图像。有什么问题吗？下面是我的代码和结果截图

更新：我仍然无法让它工作。有人能帮我吗

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
        v-for="item in carouselItems"
        :key="item.id"
        :text="item.text"
        :style="{ 'background-image' : 'url(\'' + item.image + '\')' }"
      ></b-carousel-slide>
    </b-carousel>
    <ProductList/>
  </div>
</template>

<script>
// 1. Loading images asychronously later on from S3
// https://stackoverflow.com/questions/50659676/how-to-load-image-src-url-in-vuejs-asyncronously
import ProductList from "@/components/product/ProductList.vue";

export default {
  components: {
    ProductList
  },
  data() {
    return {
      carouselItems: [
        {
          id: 1,
          image: "https://source.unsplash.com/LAaSoL0LrYs/1920x1080",
          text: "Nulla vitae elit libero, a pharetra augue mollis interdum. (1)"
        },
        {
          id: 2,
          image: "https://source.unsplash.com/LAaSoL0LrYs/1920x1080",
          text: "Nulla vitae elit libero, a pharetra augue mollis interdum. (2)"
        },
        {
          id: 3,
          image: "https://source.unsplash.com/LAaSoL0LrYs/1920x1080",
          text: "Nulla vitae elit libero, a pharetra augue mollis interdum. (3)"
        }
      ],
      slide: 0,
      sliding: null
    };
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true;
    },
    onSlideEnd(slide) {
      this.sliding = false;
    }
  }
};
</script>

<style scoped>
.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>

// 1. 稍后从S3异步加载图像
// https://stackoverflow.com/questions/50659676/how-to-load-image-src-url-in-vuejs-asyncronously
从“@/components/product/ProductList.vue”导入ProductList；
导出默认值{
组成部分：{
产品列表
},
数据（）{
返回{
旋转木马：[
{
id:1，
图像：“https://source.unsplash.com/LAaSoL0LrYs/1920x1080",
正文：“精英自由之神，奥古斯·莫利斯中间的法雷特拉（pharetra augue mollis interdum）。（1）
},
{
id:2，
图像：“https://source.unsplash.com/LAaSoL0LrYs/1920x1080",
正文：“精英自由之神，奥古斯·莫利斯中间的法雷特拉（pharetra augue mollis interdum）。（2）
},
{
id:3，
图像：“https://source.unsplash.com/LAaSoL0LrYs/1920x1080",
正文：“精英自由之神，奥古斯·莫利斯中间之神。”
}
],
幻灯片：0，
滑动：空
};
},
方法：{
滑动启动（滑动）{
这是真的；
},
滑梯（滑梯）{
这是错误的；
}
}
};
.传送带项目{
高度：100vh；
最小高度：350px；
背景：无重复中心滚动；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}

第一次渲染时的旋转木马

后续幻灯片不显示图像

返回幻灯片1，背景图像消失

---

当您使用引导vue库时，您可以使用“标题”属性而不是“文本”，使用“img src”而不是样式：背景。因为

b-carousel-slide

组件覆盖样式标记

<b-carousel-slide
        v-for="item in carouselItems"
        :key="item.id"
        :caption="item.text"
        :img-src="item.image"
      ></b-carousel-slide>

如果您想为您的臀部设置自定义样式，您可以为您的标记设置额外的类属性，如：

<b-carousel-slide
      class="MyCustomClass"
      ....
      ></b-carousel-slide>
<style>
    .MyCustomClass {
        width: 100%;    
        object-fit: cover; 
    }
</style>

.MyCustomClass{
宽度：100%；
对象匹配：覆盖；
}

---

但请注意，您使用的carousal要么是响应性的，要么是全宽的。我认为您的问题在于其他方面。

当您使用引导vue库时，您可以使用“caption”属性而不是“text”，使用“img src”而不是style:background。因为

b-carousel-slide

组件覆盖样式标记

<b-carousel-slide
        v-for="item in carouselItems"
        :key="item.id"
        :caption="item.text"
        :img-src="item.image"
      ></b-carousel-slide>

如果您想为您的臀部设置自定义样式，您可以为您的标记设置额外的类属性，如：

<b-carousel-slide
      class="MyCustomClass"
      ....
      ></b-carousel-slide>
<style>
    .MyCustomClass {
        width: 100%;    
        object-fit: cover; 
    }
</style>

.MyCustomClass{
宽度：100%；
对象匹配：覆盖；
}

---

但请注意，您使用的carousal要么是响应性的，要么是全宽的。我想你的问题是别的。

嗨，谢谢你的回复！我能够动态地渲染图像。然而，我之所以使用style:background，是为了使背景图像对移动设备做出响应。现在，图像已被移除，不再有响应。我该怎么办呢？ajafari进一步解释，我希望我的图像适合所有设备的屏幕。我如何才能做到这一点？我建议您为自定义样式项分配一个类，并添加或覆盖自定义样式项，以实现您想要的样式。虽然

b-carousel-style

内部有w-100级。嗨，阿贾法里，但我想要的是实现这样的目标哦！我知道了，你想有适合身高的形象。你没有试着使用

对象匹配：cover？嗨，谢谢你的回复！我能够动态地渲染图像。然而，我之所以使用style:background，是为了使背景图像对移动设备做出响应。现在，图像已被移除，不再有响应。我该怎么办呢？ajafari进一步解释，我希望我的图像适合所有设备的屏幕。我如何才能做到这一点？我建议您为自定义样式项分配一个类，并添加或覆盖自定义样式项，以实现您想要的样式。虽然
b-carousel-style
内部有w-100级。嗨，阿贾法里，但我想要的是实现这样的目标哦！我知道了，你想有适合身高的形象。你没有试着使用
对象匹配：cover？我认为问题在于如何在b-carousel-slide中编写v-bind:style。试试这个：
：style=“{backgroundImage:url（item.image）}”
Hi，它不起作用。旋转木马甚至没有与您的代码一起出现我认为问题在于您如何在b-carousel-slide中编写v-bind:style。试试这个：
：style=“{backgroundImage:url（item.image）}”
Hi，它不起作用。旋转木马甚至没有与您的代码一起出现