CODEWITHSUNDEEP
vue.jsvuejs2vue-component
NewTech Lover
NewTech Lover

Reputation: 1263

Can't find image path in Vue.js

I am trying to display images from an array in Vue.js. The problem is that when I try to implement images inside component it says can't find that image from that path. the component is located inside the components folder and the images are located inside the assets folder. I tried even create images folder and move those images from assets into images folder but it still shows the same error.

 <div v-for="number in [currentNumber]" :key='number'>
        <img :src="require(currentImage)" />
      </div>
...
export default {
  name: 'HelloWorld',
  data() {
    return {
      images: ['../assets/img1.jpg','../assets/img2.jpg'],
      currentNumber: 0,
    }
  },

I tried even moving out the images from assets into separate image folder:

 images: ['../images/img1.jpg','../images/img2.jpg'],

The problem was the same. I checked other similiar questions in Stack Overflow but none of them worked. How can I fix this problem?

Upvotes: 1

Views: 2334

Answers (1)

Andath
Andath

Reputation: 22724

You have to require the image instead:

export default {
  data() {
    return {
      image: require('~/path_to_image')
    }
  },

Upvotes: 1

Related Questions