How to Use Static Assets in Astro
Learn how to use static assets inside Astro, such as images, and also take a look at best practices when dealing with them.
We'll cover the following...
When it comes to working with static assets in Astro, we must remember to place everything in the public folder at the root of the project. A common practice is to organize assets into separate folders based on their file extensions—for example:
public├─ assets│ ├─ fonts # Folder for custom fonts│ ├─ icons # Folder for SVG icons| ├─ imgs # Folder for static images├─ favicon.ico├─ robots.txt
Please note that any files placed inside this folder will be copied over to the build folder as is, without any modification. Therefore, avoid placing other files inside the public folder that need to be automatically optimized—such as bundled and minified—by Astro.
Referring static assets
As we progress through this course, we'll use a few static assets, such as an image for the logo and social media icons. To reference static assets in Astro, simply use an img tag and provide the path to the ...