Menu
I have been using Vue for a while now, and I noticed that I can store project images in either the assets folder or the public folder.
To access images from assets folder in Vue, one would do :src="require('@/assets/images/myimage.jpg')"
To access images from public folder in Vue, one would do :src="./static/images/myimage.jpg"
What's the proper location to store Vue project images?
What's the implication of using either?
How do they affect my project?
774
To import and use image in a Vue. js single file component, we can set the src prop of the image to the image path returned by the require function. to set the src prop of the image to the path returned by require . We call require with the relative path of the image to return the resolved path of the image.
Over the past few years, Vue. js has become a popular choice for web application development. With its popularity, the framework has expanded its reach to static site generation, an area once dominated by React. Like Gatsby and NextJS that uses React, you can find several frameworks using Vue.
Webpack is a module bundler that takes your development assets (like Vue components and plain Javascript files) and combines them into so called bundles. This is different from simply concatenating and minifying JavaScript files. Simply put, with webpack bundles only the modules required on the current page are loaded.
vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs): <template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .example { color: red; } </style>
Based on the official vue documentation everything that is within the assets folder will be handled by Webpack while everything in the public folder is simply copied but doesn't go through Webpack: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
So if you want to take advantage of Webpacks optimization features during build (which you most certainly want) put them in assets. I also put all my img's in the assets folder and only have the pwa related images and icons within the public folder.
52
All Stuff in the public folder gets straight up copied to your /dist usually. ex: favicon.ico ends up on your /dist folder with the name... favicon.ico.
The assets folder is usually where you would put your images/videos/fonts/svgs etc that you will import within vue files. These files end up on your /dist folder as a file with a hash name: (ex: 5j2i35j2o251hia.png).
Any assets from the /assets folder that you do not explicitly import will not end up in your /dist folder, as to not bloat your final file size.
Hope this helps..
34
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Different between both would be relative (eventually as require('image')) vs absolute paths. Usually absolute path will not be passed via webpack during the build. And if you optimize images of absolute path, nothing will happen.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
