资源路径¶

资源路径用于定位 HTML 页面引用的 CSS、图片和字体。页面中的路径描述资源在目录中的相对位置，不需要写入设计文件在电脑上的完整磁盘路径，也不需要改写为引擎资产的内部名称。

同步资源时，应保留文件相对于设计时目录的位置，使其与资产目录内的逻辑路径对应。例如：

设计时目录与资产目录内 pages、styles 和 images 路径的同步对照

右侧表示资源的逻辑路径关系，实际资产文件名或后缀由平台插件处理。页面作者仍使用 pages/index.html、styles/main.css 和 images/a.jpg 等原始资源路径。

设计时目录与资产目录可以位于不同位置，也不必使用相同的目录名。保持一致的是两个目录内部的资源路径，而不是它们本身的磁盘位置。

资源查找不在两个目录间自动切换

资产预览和运行时加载使用配置的资产目录。资源在资产目录中缺失时，不会因为设计时目录中存在同名文件就自动从那里读取。

根路径¶

以 / 开头的路径表示从全局配置的 资产目录 开始查找，适用于资产预览和运行时加载。所有页面共用这一配置，不按页面单独设置。

<img src="/a.jpg" alt="Image">

/a.jpg 表示查找资产目录根部的 a.jpg。如果文件位于资产目录下的 images 子目录，应使用 /images/a.jpg。

根路径与引用它的 HTML 或 CSS 文件所在子目录无关。例如，pages/index.html 与 pages/menu/index.html 中的 /images/a.jpg 指向同一份资源。

这里的根不是磁盘根目录

/ 表示全局配置的 资产目录，不表示系统盘或工程根目录。设计时目录用于维护和同步源文件，不是资产加载失败后的备用查找位置。

不以 / 开头的路径相对于直接引用该资源的文件所在目录解析。

假设 HTML 的逻辑位置为 pages/index.html：

.. 表示返回上一级目录。它可以在资产目录内部使用，但不能越过资产目录访问其他文件。

HTML 引用 CSS 时，路径相对于 HTML 文件。例如，pages/index.html 通过 ../styles/main.css 引用样式表：

<!-- pages/index.html -->
<link rel="stylesheet" href="../styles/main.css">

外部 CSS 引用图片或字体时，路径相对于 CSS 文件自身。例如，styles/main.css 通过 ../images/a.jpg 引用图片：

/* styles/main.css */
.banner {
  background-image: url("../images/a.jpg");
}

两次引用分别从 pages/ 和 styles/ 出发。不能将外部 CSS 中的所有资源路径都按入口 HTML 所在目录解释。

若希望引用不受 CSS 所在子目录变化影响，也可写为 url("/images/a.jpg")，从当前资产目录查找。

详细信息请阅读各平台文档。