Building your application

静态资源

编辑此页面

在 SolidStart 中有两种方式可以将静态资源导入到你的项目中：使用 public 目录和使用导入。

Public 目录

丰富的 Web 应用程序使用资源来创建视觉效果。在 SolidStart 中，/public 目录可用于存储静态资源。这些资源会按照它们相对于 public 目录的确切路径来提供服务：

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

如果你想引用 public 目录中的资源，你可以使用资源的绝对路径：

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

当您想要对静态资源有可读且稳定的引用时，这是理想的选择。这对以下资源很有用：

  • 文档
  • service workers
  • 图片、音频和视频
  • manifest 文件
  • metadata 文件 (e.g., robots.txt, sitemaps)
  • favicon 网站图标

导入资源

Vite 提供了一种直接将资源导入到 Solid 组件中的方法：

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" />
    </>
  );
}

当你使用导入时，Vite 会创建一个带哈希的文件名。例如，solid.png 将变成 solid.2d8efhg.png。

Public 目录与导入

public 目录和导入都是在项目中包含静态资源的有效方式。选择使用其中一种方式取决于你的具体使用场景。

对于资源的动态更新，使用 public 目录是最佳选择。它让你能够完全控制资源的 URL 路径，确保即使在资产更新时链接也保持一致。

当使用导入时，文件名会被哈希处理，因此随时间推移将无法预测。这对于缓存清除有利，但如果你想向他人发送资源链接则会带来不便。

报告此页面问题