Can't find image path in Vue.js

Question

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?

Billal BEGUERADJ · Accepted Answer · 2019-07-14 09:49:28Z

1

You have to require the image instead:

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

edited Jul 14, 2019 at 9:49

answered Jul 14, 2019 at 9:46

Billal BEGUERADJ

23k45 gold badges125 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

NewTech Lover Over a year ago

So how will look like the above array of the images in my question if I create a separate static folder?

NewTech Lover Over a year ago

For this line: images: ['../images/img1.jpg','../images/img2.jpg'],

Billal BEGUERADJ Over a year ago

Sorry for static folder, I thought you were using Nuxt.js (but the code above is Ok becuase Nuxt.js = Vue.js + SSR)

NewTech Lover Over a year ago

Your code looks good for one image while I am using an array of images as you see. So how will look like your solution for this array? images: ['../images/img1.jpg','../images/img2.jpg'], Where exactly to add require in this case?

NewTech Lover Over a year ago

Is there another solution? because in this case, it becomes quite complicated for iterating.

|

Collectives™ on Stack Overflow

Can't find image path in Vue.js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related