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>

或者您也可以在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>

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

Answer 2

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

无法在Vuejs中显示图像

2 个答案: