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 use the require function in the template.

For instance, we write

<img :src="require(`@/assets/${name}.png`)" alt class="icon" />

to set the src prop to require(@/assets/${name}.png).

We call require with the absolute image path of the image.

And @/ is the shorthand for the src directory of the Vue project.

Conclusion

To fix Vue.js dynamic images not working, we can use the require function in the template.