Static assets
Edit this pageWithin SolidStart there are two ways to import static assets into your project: using the public directory and using imports.
Public directory
Rich web applications use assets to create visuals.
In SolidStart, the /public
directory can be used to store static assets.
These assets are served at the exact path they are in, relative to the public directory:
If you would like to reference an asset in the public directory, you can use the absolute path to the asset:
This is ideal when you want to have human-readable, stable references to static assets. This can be useful for assets such as:
- documents
- service workers
- images, audio, and video
- manifest files
- metadata files (e.g.,
robots.txt
, sitemaps) - favicon
Importing assets
Vite provides a way to import assets directly into your Solid components:
When you use imports, Vite will create a hashed filename.
For example, solid.png
will become solid.2d8efhg.png
.
Public directory versus imports
The public directory and imports are both valid ways to include static assets in your project. The driver to using one over the other is based on your use case.
If you want the links to your assets to update when they changes, the public directory is the best choice. This gives you full control over the url path to your assets and ensures that the links to your assets never change.
When using imports, the filename is hashed and therefore will not be predictable over time. This can be beneficial for cache busting but detrimental if you want to send someone a link to the asset.