mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
3.5 KiB
JSON
17 lines
3.5 KiB
JSON
{
|
|
"id": "1460efd5190a09978df2d4d0",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "static-assets",
|
|
"content": "---\ntitle: Static assets\nuse_cases: \u003e-\n images, fonts, documents, favicon, robots.txt, service workers, media files,\n public resources\ntags:\n - assets\n - images\n - public\n - static\n - media\n - files\nversion: '1.0'\ndescription: \u003e-\n Manage static assets in SolidStart using the public directory or imports.\n Serve images, fonts, documents, and media files.\n---\n\nWithin SolidStart there are two ways to import static assets into your project: using the public directory and using imports.\n\n## Public directory\n\nRich web applications use assets to create visuals.\nIn SolidStart, the `/public` directory can be used to store static assets.\nThese assets are served at the exact path they are in, relative to the public directory:\n\n```\n|-- public\n| favicon.ico -\u003e /favicon.ico\n| |-- images\n| | |-- logo.png -\u003e /images/logo.png\n| | |-- background.png -\u003e /images/background.png\n| |-- models\n| | |-- player.gltf -\u003e /models/player.gltf\n| |-- documents\n| | |-- report.pdf -\u003e /documents/report.pdf\n```\n\nIf you would like to reference an asset in the public directory, you can use the absolute path to the asset:\n\n```tsx { 5 }\nexport default function About() {\n return (\n \u003c\u003e\n \u003ch1\u003eAbout\u003c/h1\u003e\n \u003cimg src=\"/images/logo.png\" alt=\"Solid logo\" /\u003e\n \u003c/\u003e\n );\n}\n```\n\nThis is ideal when you want to have human-readable, stable references to static assets.\nThis can be useful for assets such as:\n- documents\n- service workers\n- images, audio, and video\n- manifest files\n- metadata files (e.g., `robots.txt`, sitemaps)\n- favicon\n\n## Importing assets\n\nVite provides a way to import assets directly into your Solid components:\n\n```tsx\nimport logo from \"./solid.png\";\n\nexport default function About() {\n return (\n \u003c\u003e\n \u003ch1\u003eAbout\u003c/h1\u003e\n \u003cimg src={logo} alt=\"Solid logo\" /\u003e\n // Renders\n \u003cimg src=\"/assets/solid.2d8efhg.png\" alt=\"Solid logo\" /\u003e\n \u003c/\u003e\n );\n}\n```\n\nWhen you use imports, Vite will create a hashed filename.\nFor example, `solid.png` will become `solid.2d8efhg.png`.\n\n## Public directory versus imports\n\nThe public directory and imports are both valid ways to include static assets in your project.\nThe driver to use one over the other is based on your use case.\n\nFor dynamic updates to your assets, using the public directory is the best choice.\nIt allows you to maintain full control over the asset URL paths, ensuring that the links remain consistent even when the assets are updated.\n\nWhen using imports, the filename is hashed and therefore will not be predictable over time.\nThis can be beneficial for cache busting but detrimental if you want to send someone a link to the asset.",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/static-assets.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-start/building-your-application/static-assets.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2709,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "c5915c605fc2704837e7a930d74d46ca7f9d16a6eb46660d36415f2c6d8d9b80",
|
|
"timestamp": "2026-02-23T11:43:00.194018976+01:00"
|
|
} |