Sometimes, we want to fix Vue.js dynamic images not working.
In this article, we’ll look at how to fix Vue.js dynamic images not working.
How to fix Vue.js dynamic images not working?
To fix Vue.js dynamic images not working, we can create a method that returns the path to the image.
For instance, we write
<template>
<div class="col-lg-2" v-for="pic in pics">
<img :src="getImgUrl(pic)" v-bind:alt="pic" />
</div>
</template>
<script>
//...
export default {
//...
methods: {
//...
getImgUrl(pic) {
return require("../assets/" + pic);
},
},
//...
};
</script>
to add the getImgUrl method that calls require with the relative path to return the path of the image/
And then we set the src prop to the path string returned by the getImgUrl function.
Conclusion
To fix Vue.js dynamic images not working, we can create a method that returns the path to the image.
