Не удается рендерить изображения динамически на карусель Vuejs - PullRequest
Новая
       101

Не удается рендерить изображения динамически на карусель Vuejs

0 голосов
/ 04 мая 2019

Я настроил карусель, используя 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>

Карусель, когда она была впервые представлена Carousel when it was first rendered

Следующий слайд не отображает изображение Subsequent slide not display image

Возвращаясь к слайду 1, фоновое изображение исчезло Returning back to slide 1 and the background image is gone

1 Ответ

0 голосов
/ 04 мая 2019

Поскольку вы используете библиотеку bootstrap-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>

Если вы хотите иметь собственный стиль для своей игры, вы можете установить дополнительный класс attr для вашего тега, например: 

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

Но обратите внимание, что карусель, который вы используете, является либо отзывчивым, но и полноразмерным. Я думаю, что твоя проблема в другом.

...