无法在Vuejs中显示图像

Question

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 but not the images. I checked the console and there was no error. Hence, I am very confused. Below are my codes and screenshots of the problem

UPDATE: I am trying to fix this problem for 2 days already, help is greatly needed!

This is my project structure

This are my codes

<template>
  <div>
    <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"
    >
      <b-carousel-slide
        v-for="item in carouselItems"
        :key="item.id"
        :caption="item.caption"
        :text="item.text"
        :style="{ 'background-image': 'url(' + item.image + ')' }"
      ></b-carousel-slide>
    </b-carousel>
  </div>
</template>

<script>

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;
    }      
  }
};
</script>

Here is a screenshot:

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

Update: I've removed the style and replaced it with the following code

:img-src="item.image"

After I save the changes and refresh, I can see an icon indicating that the browser could not load the images.

Update 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

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
    };
  },

Update 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

Update 7/5/2019 I am still trying to fix this issue, can anyone help me with the CSS?

Answer 1

Try using img-src="https://xxxxx" instead of changing the style . You should get something like that in your code:

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

Or you can just use an actual img tag inside the <b-carousel-slide> :

     <b-carousel-slide>
        <img
          slot="img"
          class="d-block img-fluid w-100"
          width="1024"
          height="480"
          src="https://xxxxxx"
          alt="image slot"
        >
      </b-carousel-slide>

You should also check your pictures 'path' since webpack adds a unique-id automatically to each image and can sometimes be troublesome in certain cases, just check that the webpack config is working on your images.

Answer 2

<b-carousel>不会裁剪图像，它会尝试保留其原始宽高比（与本机Bootstrap V4.x轮播相同）。