Static Assets

Within 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:

|-- public
|   favicon.ico                   ->  /favicon.ico
|   |-- images
|   |   |-- logo.png              ->  /images/logo.png
|   |   |-- background.png        ->  /images/background.png
|   |-- models
|   |   |-- player.gltf           ->  /models/player.gltf
|   |-- documents
|   |   |-- report.pdf            ->  /documents/report.pdf

If you would like to reference an asset in the public directory, you can use the absolute path to the asset:

export default function About() {
  return (
    <>
      <h1>About</h1>
      <img src="/images/logo.png" alt="Solid logo" />
    </>
  );
}

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:

import logo from "./solid.png";

export default function About() {
  return (
    <>
      <h1>About</h1>
      <img src={logo} alt="Solid logo" />
      // Renders
      <img src="/assets/solid.2d8efhg.png" alt="Solid logo" />
    </>
  );
}

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.