带有本地图像的 Vue.js 滑块不起作用

Question

您好，我在“digitalocean.com”上找到了适用于 Vue.js 的此图像滑块，但仅适用于（imgbb、pixabay 等）上传的图像。我尝试设置本地图像（在资产上）但不起作用，有人可以帮助我吗？ 我已经尝试过 ../assets/castelgandolfo.jpg 或 ./assets/castelgandolfo.jpg 对不起我的英语！

这是代码：

export default {
  name: "Slider",
  data() {
    return {
      images: [
        "https://i.ibb.co/6NJ7p6w/Castelgandolfo.jpg",
        "https://i.ibb.co/QJN06cG/Grottaferrata.jpg",
        "https://i.ibb.co/R3pHtGx/Ariccia.jpg",
      ],
      timer: null,
      currentIndex: 0
    };
  },

  mounted: function() {
    this.startSlide();
  },

  methods: {
    startSlide: function() {
      this.timer = setInterval(this.next, 10000);
    },

    next: function() {
      this.currentIndex += 1;
    },
    prev: function() {
      this.currentIndex -= 1;
    }
  },

  computed: {
    currentImg: function() {
      return this.images[Math.abs(this.currentIndex) % this.images.length];
    }
  }
};

Answer 1

您可以使用“@”直接引用图片

例子：

<img src="@/assets/images/home.png"/>