无法在 Vuejs 中显示图像

Question

我已经使用 bootstrap-vue 设置了一个轮播。轮播项目是使用 for 循环和数组动态创建的。该数组包含三个具有以下键的对象：id、标题、文本和图像路径。到目前为止，我能够显示标题和文本但不能显示图像。我检查了控制台，没有错误。因此，我很困惑。下面是我的代码和问题截图

更新：我已经尝试解决这个问题 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"

保存更改并刷新后，我可以看到一个图标，指示浏览器无法加载图像。

更新我已成功将图像渲染到轮播幻灯片。显然，如果图像路径是相对的，则需要“require”。我已将这部分代码更新为以下内容

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

更新 但是，现在我面临另一个问题，在移动模式下，图像不适合屏幕的整个高度。我希望它反应灵敏。这是我的问题的屏幕截图

更新 2019 年 7 月 5 日我仍在尝试解决此问题，谁能帮我解决 CSS 问题？

Answer 1

尝试使用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>

或者您可以在<b-carousel-slide> 中使用实际的img 标签：

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

您还应该检查您的图片“路径”，因为 webpack 会自动为每张图片添加一个唯一 ID，有时在某些情况下可能会很麻烦，只需检查 webpack 配置是否适用于您的图片。

Answer 2

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