href路径必须是绝对路径或根相对路径，浏览器以页面origin为基准解析，不依赖html所在目录；需与完全一致（含大小写、斜杠、查询参数），否则缓存无法复用。
href路径必须是绝对路径或根相对路径
浏览器解析 <link rel="preload"> 时，href 不按当前 HTML 所在目录推算，而是以页面 origin 为基准。写成 ./images/logo.png 或 images/logo.png 很可能 404，尤其当 HTML 部署在子路由（如 /user/profile.html）时。
正确做法只有两种：
-
href="/images/logo.png（根相对路径，开头带/） -
href="https://cdn.example.com/logo.png（完整 URL，含协议和域名）
别指望构建工具自动修正——如果用 Webpack/Vite 做文件哈希，href 必须和最终 <img src> 的值完全一致，否则预加载进缓存的资源无法被复用。
路径必须与最终 <img src> 完全一致
预加载不是“随便拉一张图”，而是把资源提前放进内存缓存，等 <img> 标签真正用到它时直接复用。只要 href 和 src 字符串有任意差异，就视为不同资源：
- 大小写不同：
/IMG/logo.png≠/img/logo.png - 斜杠结尾与否：
/assets/banner/≠/assets/banner - query 参数缺失：
/photo.jpg≠/photo.jpg?v=2 - 格式不匹配：预加载
.webp，但<img src>指向.jpgfallback 路径
常见翻车点：用 srcset 做响应式图片时，<link preload> 只能指定其中某一个确定 URL（比如 1x 或 2x 版本），不能写表达式或通配符。
不能在 href 里写 JS 变量或模板语法
<link rel="preload"> 是纯静态声明，浏览器在 HTML 解析早期就处理它，此时 JS 还没执行、服务端模板也没渲染完。
以下全是无效写法：
-
href="/assets/${name}.webp"（ES6 模板字面量） -
href=""（EJS / Pug 等服务端模板） -
href={logoUrl}（React JSX，根本不会出现在最终 HTML 中）
若路径动态生成，必须由 SSR 或构建流程在 HTML 输出前固化。例如 Vite 插件可扫描 <img> 并自动注入对应 <link preload>，但你不能指望运行时 JS 去“补上”。
避免把 CDN 域名拼错或漏协议
用 CDN 时，href 必须是可直连的完整地址。常见错误：
- 漏
https://，写成cdn.example.com/logo.png→ 浏览器当相对路径处理，变成https://yoursite.com/cdn.example.com/logo.png - CDN 域名多写一个点：
https://cdn..example.com→ DNS 解析失败 - 路径中混用大小写或特殊字符未编码：
/icons/❤️.svg需 URL 编码为/icons/%E2%9D%A4%EF%B8%8F.svg
验证方式很简单：把 href 值复制到浏览器地址栏，看是否能直接下载图片。不能，则预加载必失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
