DEV Community

Cover image for Loading dynamic images in a Vue Component

Loading dynamic images in a Vue Component

Joe Erickson on November 05, 2019

When I first started using Vue, one thing I got continually wrong was how to load an image into a Vue component dynamically. At first, I found that...
Collapse
 
webdevchallenges profile image
Marc

Can't you just return the absolute path without FQDN like /assets/visa.png instead?

Collapse
 
firstclown profile image
Joe Erickson • Edited

Because the image won't live in /assets/visa.png! Everything in the assets folder, if it is used, will be deployed to an img/ directory if it's not turned into a dataurl.

Because it lives in the src/ directory in the project, it's not accessible once the project is built for production. Using require() lets the Vue CLI (actually webpack) know that you're using it and is then deployed properly during the build process. You can read more about that at Static Assets Handling in the Vue CLI documentation.