title: Cannot render images dynamically to carousel Vuejs
body: <p>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</p>
  
  <p>Update: I am still not able to get this to work. Can anyone help me? </p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;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"
      &gt;
        &lt;!-- Text slides with image --&gt;
        &lt;b-carousel-slide
          v-for="item in carouselItems"
          :key="item.id"
          :text="item.text"
          :style="{ 'background-image' : 'url(\'' + item.image + '\')' }"
        &gt;&lt;/b-carousel-slide&gt;
      &lt;/b-carousel&gt;
      &lt;ProductList/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  // 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;
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .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;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Carousel when it was first rendered
  <a href="https://i.stack.imgur.com/YJixm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YJixm.jpg" alt="Carousel when it was first rendered"></a></p>
  
  <p>Subsequent slide not display image
  <a href="https://i.stack.imgur.com/c4YuW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c4YuW.png" alt="Subsequent slide not display image"></a></p>
  
  <p>Returning back to slide 1 and the background image is gone
  <a href="https://i.stack.imgur.com/Y9Bbc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y9Bbc.png" alt="Returning back to slide 1 and the background image is gone"></a></p>