Image path in Vue JS [duplicate]

Question

I have structure file in vue js like this:

--assets
----image
------my-image.png
------my-image2.png

--components
----user
------userStart.vue

I will show the image using object in array here is my code (userStart.vue)

<img v-for="image in images" :src="image.url"/>

export default{
  data(){
    return {
      images : [
         {
            url : '../../assets/image/my-image.png',
            name : 'My Image 1',
         },
         {
            url : '../../assets/image/my-image1.png',
            name : 'My Image 2'
         }
      ]
    }
  }
}

The problem is I cannot show the image, how to fix it? Thank you

If you're not importing the image file, that URL isn't relative to the current file - it's relative the root of the served directory. Which directory are you serving your static assets from? — Brooke Holmes
– Brooke Holmes, Commented Sep 16, 2018 at 10:44
@Sanjay below is correct in that you have to use require but in your JS, not in your template. See some of the answers here ~ stackoverflow.com/questions/47313165/… — Phil
– Phil, Commented Sep 16, 2018 at 13:43

Axel · Accepted Answer · 2018-09-16 12:57:58Z

17

You can use require()

For example:

<img v-for="image in images" :src="require(image.url)">

answered Sep 16, 2018 at 12:57

Axel

5,28119 gold badges80 silver badges152 bronze badges

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

3 Comments

dedi wibisono Over a year ago

yes it works, thanks @Sanjay

Beto Silva Over a year ago

What worked for me was wrap require in the JS like { url: require('../../assets/image1.png') }

Xsmael Over a year ago

it will be very useful to also mention why and how that does work.

Collectives™ on Stack Overflow

Image path in Vue JS [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related