Categories
Vue Answers

How to fix Vue.js dynamic images not working?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *