title: Cannot display images in Vuejs
body: <p>I've set up a carousel using bootstrap-vue. The carousel-items are created dynamically using a for loop and an array. The array contains three objects with the following keys: id, caption, text and image path. So far, I am able to display the caption and text <strong>but not the images.</strong> I checked the console and there was no error. Hence, I am very confused. Below are my codes and screenshots of the problem</p>
  
  <p><strong>UPDATE:</strong> I am trying to fix this problem for 2 days already, help is greatly needed!</p>
  
  <p>This is my project structure</p>
  
  <p><a href="https://i.stack.imgur.com/CHasv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CHasv.png" alt="Project Structure"></a></p>
  
  <p>This are my codes</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-carousel
        id="carousel-1"
        v-model="slide"
        :interval="10000"
        controls
        indicators
        background="#ababab"
        style="text-shadow: 1px 1px 2px #333;"
        @sliding-start="onSlideStart"
        @sliding-end="onSlideEnd"
      &gt;
        &lt;b-carousel-slide
          v-for="item in carouselItems"
          :key="item.id"
          :caption="item.caption"
          :text="item.text"
          :style="{ 'background-image': 'url(' + item.image + ')' }"
        &gt;&lt;/b-carousel-slide&gt;
      &lt;/b-carousel&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    data() {
      return {
        carouselItems: [
          {
            id: 1,
            caption: "Memories",
            image: "@/assets/images/Homepage-min.jpg",
            text: "Memories(1)"
          },
          {
            id: 2,
            caption: "Memories",
            image: "@/assets/images/Homepage-min.jpg",
            text: "Memories(2)"
          },
          {
            id: 3,
            caption: "Memories",
            image: "@/assets/images/Homepage-min.jpg",
            text: "Memories(3)"
          }
        ],
        slide: 0,
        sliding: null
      };
    },
    methods: {
      onSlideStart(slide) {
        this.sliding = true;
      },
      onSlideEnd(slide) {
        this.sliding = false;
      }      
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is a screenshot:
  <a href="https://i.stack.imgur.com/C3bao.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C3bao.png" alt="Image not displayed"></a></p>
  
  <p><strong>Update</strong> I went to take a look at the networks tab to see if I specified the wrong image path. However, the image path was correct as the status code is 304. What seems to be the problem? Can anyone help?</p>
  
  <p><a href="https://i.stack.imgur.com/WV2oo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WV2oo.png" alt="enter image description here"></a></p>
  
  <p><strong>Update:</strong> I've removed the style and replaced it with the following code</p>
  
  <pre><code>:img-src="item.image"
  </code></pre>
  
  <p>After I save the changes and refresh, I can see an icon indicating that the browser could not load the images. </p>
  
  <p><a href="https://i.stack.imgur.com/PjAxQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PjAxQ.png" alt="enter image description here"></a></p>
  
  <p><strong>Update</strong> I've successfully rendered the images to the carousel-slide. Apparently, "require" is needed if the image path is relative. I've updated this portion of my code to the following</p>
  
  <pre><code>data() {
      return {
        carouselItems: [
          {
            id: 1,
            caption: "Memories",
            image: require("@/assets/images/Homepage-min.jpg"),
            text: "Memories(1)"
          },
          {
            id: 2,
            caption: "Memories",
            image: require("@/assets/images/Homepage-min.jpg"),
            text: "Memories(2)"
          },
          {
            id: 3,
            caption: "Memories",
            image: require("@/assets/images/Homepage-min.jpg"),
            text: "Memories(3)"
          }
        ],
        slide: 0,
        sliding: null
      };
    },
  </code></pre>
  
  <p><strong>Update</strong> However, now I face another problem, the image does not fit the entire height of the screen when in mobile mode. I want it to be responsive. Here is a screen shot of my problem</p>
  
  <p><strong>Update</strong> 7/5/2019 I am still trying to fix this issue, can anyone help me with the CSS?</p>
  
  <p><a href="https://i.stack.imgur.com/EukSA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EukSA.png" alt="Image not responsive and does not fit to screen in mobile"></a></p>