路径以HTML文件位置为基准：同级用./（可省略），上级用../；/开头是服务器根路径，本地file://下易404；public资源用/src，src/assets资源需构建处理或JS动态引入。
src 路径写成 ./ 还是 ../？看文件相对位置
路径写错，src 就加载不出图片、脚本或样式——根本不是代码逻辑问题，而是浏览器根本没找到文件。关键就一条：路径是相对于当前 HTML 文件所在位置计算的，不是相对于 JS 或 CSS 文件，也不是相对于服务器根目录。
比如 index.html 在 /project/pages/index.html，要引用同级的 logo.png，就得写 src="./logo.png"；如果图片在上一级的 assets/ 目录下，就得写 src="../assets/logo.png"。
-
./表示“当前目录”，可省略（src="logo.png"等价于src="./logo.png"），但显式写出更清晰 -
../每出现一次，就向上退一层目录，../../img/icon.svg表示退两层后进img/ - 路径中不要混用反斜杠
\，Windows 编辑器里也必须用正斜杠/
用 / 开头的路径为什么有时失效？它不是绝对路径吗
以 / 开头的路径是“服务器根路径”，不是文件系统根路径。它的起点取决于你访问页面时的 URL 基础路径，也就是 Web 服务器配置的 root 或 base href。
本地双击打开 HTML 文件（file:// 协议）时，/img/logo.jpg 会尝试读取磁盘根目录下的 /img/logo.jpg，几乎必然 404；而部署到 https://example.com/app/ 后，/img/logo.jpg 实际请求的是 https://example.com/img/logo.jpg，不是 /app/img/logo.jpg ——除非你把资源真放到了服务器根目录。
- 开发阶段用
file://打开，一律避免以/开头的src - 上线后若项目部署在子路径（如
/my-app/），又想用根路径写法，需配合<base href="/my-app/">，否则所有相对路径都会错位 - 构建工具（如 Vite、Webpack）通常默认处理 public 目录为根路径，此时
/icon.png指向public/icon.png，和运行时服务器配置强相关
HTML 中的 src 和 JS 里的 import 路径规则一样吗
完全不一样。src 是浏览器运行时解析的路径，由 HTML 文件位置决定；而 ES Module 的 import 是打包工具（或现代浏览器原生模块）在构建或加载时解析的路径，遵循模块解析算法，支持别名、扩展名省略、包名等。
比如你在 pages/detail.js 里写 import utils from '../lib/utils.js'，这是合法的；但不能在 detail.html 的 <script src="../lib/utils.js"></script> 里指望它自动补 .js 后缀——浏览器不会做任何解析，路径必须精确匹配文件名和大小写。
- HTML 的
src不支持 Node.js 式的包名导入（如src="lodash"） - 不支持路径别名（如
@/assets），那是构建工具层面的概念，HTML 本身不认识 - 大小写敏感：Linux/macOS 服务器上，
IMG.PNG和img.png是两个文件，写错就 404
Vite/Webpack 项目里 public 和 src/assets 下的资源怎么引
这是最容易混淆的点。Vite 中，public/ 目录下的文件会原样复制到构建输出根目录，访问路径就是 /xxx；而 src/assets/ 下的文件会被打包、哈希、重命名，并生成正确的相对路径。
所以：<img src="/logo.svg"> 能工作，前提是 logo.svg 在 public/logo.svg；如果它在 src/assets/logo.svg，就必须用 <img src="@/assets/logo.svg">（配合别名配置），或者在 JS 中动态 import 再赋值给 src，否则构建后路径就断了。
-
public/适合 favicon、robots.txt、静态 JSON 等不需要构建处理的资源 -
src/assets/适合图片、字体等需要压缩、转 base64、生成 hash 的资源 - 直接在 HTML 中写
src="./assets/logo.png"是错的——HTML 文件不在src/目录下，这个相对路径找不到文件
最常被忽略的是：路径是否生效，跟「你编辑器里能不能预览」毫无关系。编辑器内置服务可能模拟了某种根路径，但真实环境（本地 server、Nginx、CDN）的路径解析规则才是唯一标准。上线前务必用真实 HTTP 服务测试，别信双击打开的 file:// 效果。
