Image path in Vue JS
24,557
You can use require()
For example:
<img v-for="image in images" :src="require(image.url)">
Author by
dedi wibisono
Updated on September 17, 2020Comments
-
dedi wibisono over 3 years
I have structure file in vue js like this:
--assets
----image
------my-image.png
------my-image2.png--components
----user
------userStart.vueI 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
-
dedi wibisono over 5 yearsyes it works, thanks @Sanjay
-
Beto Silva about 5 yearsWhat worked for me was wrap
require
in the JS like{ url: require('../../assets/image1.png') }
-
Xsmael over 2 yearsit will be very useful to also mention why and how that does work.