无法将图片动态呈现到轮播Vuejs [英] Cannot render images dynamically to carousel Vuejs

问题描述

我已经使用bootstrap-vue设置了一个轮播.我使用了for循环和对象数组来动态创建组件.在每张幻灯片中，我都将包括文本和背景图像.我能够动态渲染文本.但是，背景图像仅出现在第一张幻灯片上.对于后续幻灯片，将不再渲染图像.似乎是什么问题?下面是我的代码和结果的屏幕截图

I've set up a carousel using bootstrap-vue. I used a for loop and an array of objects to dynamically create the component. In each of the slide, I will include a text as well as a background image. I was able to render the texts dynamically. However, the background image only appeared at the first slide. For subsequent slides, the image will not be rendered anymore. What seems to be the problem? Below are my codes and a screenshot of the result

更新:我仍然无法使它正常工作.谁能帮我?

Update: I am still not able to get this to work. Can anyone help me?

<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>

轮播首次呈现时

后续幻灯片不显示图像

Subsequent slide not display image

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

Returning back to slide 1 and the background image is gone

推荐答案

在使用bootstrap-vue库时，可以使用标题"属性代替文本"，并使用"img-src"代替style:background.因为b-carousel-slide组件会覆盖样式标签.

As you use bootstrap-vue library, you can use "caption" attribute instead of "text" and "img-src" instead of style:background. Because b-carousel-slide component override style tag.

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

如果您想为自定义对象设置自定义样式，则可以为标签设置其他类attr，例如:

If you want to have a custom style for your crousal you can set an additional class attr to your tag like:

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

但是请注意，您使用的旋转木马既有响应能力，又有全宽度.我认为您的问题是另外一回事.

But pay attention that the carousal you are using is either responsive and also full-width. I think your problem is something else.

这篇关于无法将图片动态呈现到轮播Vuejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！