Home > Software engineering >  Vue.js slider with local image doesn't work
Vue.js slider with local image doesn't work

Time:01-27

Hi i find this image slider for Vue.js on "digitalocean.com" but works only with image uploaded on (imgbb, pixabay, etc). i try to set with local image (on assets) but doesn't work, some one can help me? i already tried with ../assets/castelgandolfo.jpg or ./assets/castelgandolfo.jpg sorry for my english!

This is the code:

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

CodePudding user response:

You can refer images directly using '@'

Example:

<img src="@/assets/images/home.png"/>
  •  Tags:  
  • Related