Vue.js dynamic images not working
I got this working by following code
getImgUrl(pet) { var images = require.context('../assets/', false, /\.png$/) return images('./' + pet + ".png") }and in HTML:
<div class="col-lg-2" v-for="pic in pics"> <img :src="getImgUrl(pic)" v-bind:alt="pic"></div>But not sure why my earlier approach did not work.
Here is a shorthand that webpack will use so you don't have to use require.context.
HTML:
<div class="col-lg-2" v-for="pic in pics"> <img :src="getImgUrl(pic)" v-bind:alt="pic"></div>Vue Method:
getImgUrl(pic) { return require('../assets/'+pic)}And I find that the first 2 paragraphs in here explain why this works? well.
Please note that it's a good idea to put your pet pictures inside a subdirectory, instead of lobbing it in with all your other image assets. Like so: ./assets/pets/
You can try the require function. like this:
<img :src="require(`@/xxx/${name}.png`)" alt class="icon" />The @ symbol points to the src directory.
source: Vue URL transfrom rules