预加载图片不显示与preload无关，根本原因是img标签src路径错误、请求失败或资源解析异常；需检查Network中img请求状态、href与src严格一致、路径基准、MIME类型及CORS配置。
预加载图片没显示，先看 Network 里有没有请求
预加载（link rel="preload"）本身不触发渲染，只提前拉取资源。图片不显示，和它是否被预加载完全无关——你看到的“没显示”，其实是 img 标签自己没加载成功，或压根没渲染出来。
打开开发者工具 → Network → 刷新 → 筛选 img，确认两点：
- 有没有发出对应
img的请求（不是link[rel=preload]那条） - 该请求状态码是
404、403还是200
如果连 img 请求都没出现，问题出在 src 属性缺失、为空、被 JS 覆盖成空字符串，或模板变量未渲染。
link rel="preload" 的 href 和 img src 必须严格一致
预加载不会自动绑定到某个 img 上，浏览器只按 URL 字符串做匹配。哪怕只差一个斜杠、大小写、查询参数，就无法复用预加载结果。
立即学习“前端免费学习笔记（深入）”；
常见翻车点：
-
<link rel="preload" href="logo.png" as="image">，但<img src="./logo.png">→./和无前缀路径在部分浏览器中不视为相同 -
href="/assets/logo.png"对应src="assets/logo.png"→ 绝对路径 vs 相对路径，完全不匹配 -
href="logo.png?v=1"但src="logo.png"→ 参数不同，缓存键不同，无法命中
建议：预加载的 href 值，直接复制粘贴自 img 的 src 值，不要手写。
预加载后 img 仍 404？说明路径基准错了
预加载能发出去，只证明 href 是个合法 URL；但 img 加载失败，大概率是它的 src 解析路径基准不对。
关键规则：img src 的解析永远以当前 HTML 文件所在目录为起点，不是以 link 标签位置，也不是以页面 URL 路径。
比如：
- HTML 在
/pages/index.html，图片在/assets/logo.png→src必须写../assets/logo.png，不能写/assets/logo.png（除非你确定部署在域名根目录） - 本地双击打开 HTML（
file://协议）时，所有以/开头的路径都指向磁盘根（如C:/），必然失败 - VS Code 拖拽生成的路径带
file:///前缀 → 手动删掉，只留./images/icon.svg这类
预加载了但图片还是空白？检查 MIME 类型和 CORS
Network 中图片请求返回 200 却不显示，常见于：
- 服务器返回了错误的
Content-Type（例如返回text/plain却声称是 PNG），浏览器拒绝解码 - 用了
crossorigin="anonymous"但目标服务器没配Access-Control-Allow-Origin→ 图片加载失败且静默，控制台可能无提示 - 图片文件实际损坏（魔数异常、截断），双击能打开只是系统用缓存或兼容层兜底，浏览器原生解析失败
验证方式：把 src 地址单独粘贴到新标签页打开。打不开 → 文件或路径问题；打得开但嵌入页面不显示 → 查响应头、CORS、CSS 隐藏（如 display: none 或父容器 overflow: hidden）。
真正容易被忽略的是：预加载成功 ≠ 图片能显示。它只解决“下载快”，不解决“路径对不对”“格式认不认”“权限给不给”。排查必须从 img 标签自身出发，别被 preload 分散注意力。
