Невозможно отобразить изображения в Vuejs

Question

Я настроил карусель, используя bootstrap-vue. Элементы карусели создаются динамически с использованием цикла for и массива. Массив содержит три объекта со следующими ключами: идентификатор, заголовок, текст и путь к изображению. Пока что я могу отображать заголовок и текст , но не изображения. Я проверил консоль, и ошибки не было. Следовательно, я очень смущен. Ниже приведены мои коды и скриншоты проблемы

ОБНОВЛЕНИЕ: Я пытаюсь решить эту проблему уже 2 дня, помощь очень нужна!

Это структура моего проекта

Это мои коды

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

Вот скриншот:

Обновление Я пошел, чтобы взглянуть на вкладку сети, чтобы увидеть, если я указал неправильный путь к изображению. Однако путь к изображению был правильным, так как код состояния - 304. В чем проблема? Кто-нибудь может помочь?

Обновление: Я удалил стиль и заменил его следующим кодом

:img-src="item.image"

После сохранения изменений и обновления я вижу значок, указывающий, что браузер не может загрузить изображения.

Обновление Я успешно отрисовал изображения на карусельном слайде. По-видимому, требуется «требуется», если путь к изображению является относительным. Я обновил эту часть своего кода до следующего

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

Обновление Однако теперь я сталкиваюсь с другой проблемой: изображение не умещается на всю высоту экрана в мобильном режиме. Я хочу, чтобы это было отзывчивым. Вот скриншот моей проблемы

Обновление 7/5/2019 Я все еще пытаюсь решить эту проблему, может кто-нибудь помочь мне с CSS?

Answer 1

<b-carousel> не обрезает изображения, он пытается сохранить их исходное соотношение сторон (то же, что и в собственной карусели Bootstrap V4.x).

Answer 2

Попробуйте использовать img-src="https://xxxxx" вместо изменения style. Вы должны получить что-то подобное в своем коде:

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

Или вы можете просто использовать фактический тег img внутри <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>

Вам также следует проверить «путь» к изображениям, поскольку веб-пакет автоматически добавляет уникальный идентификатор к каждому изображению и в некоторых случаях может вызывать проблемы, просто убедитесь, что конфигурация веб-пакета работает с вашими изображениями.