DEV Community

Discussion on: Loading dynamic images in a Vue Component

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.