图片路径必须以HTML入口文件为基准写相对路径，浏览器解析时始终从index.html所在目录出发；禁止在组件模板中直写img标签或内联background-image，CSS中的url也受限于CSS文件路径；可用document.images快速验伤，CI中集成Puppeteer自动检查。
公共图片资源一旦散落在不同目录或混用路径写法，后续迁移、协作、CDN 接入就容易集体 404。规范管理的核心不是建多深的文件夹，而是统一路径基准、明确引用边界、让每个 src 都可推导、可验证。
所有图片路径必须以 HTML 入口文件为基准写相对路径
浏览器解析 src 时，永远从当前 HTML 文件所在目录出发。不是从项目根、不是从 JS 入口、也不是从构建输出目录——就是那个被浏览器直接请求的 index.html 所在位置。
- 如果
index.html在根目录，图片也在根目录，就写<img src="logo.png">，别写<img src="/logo.png">（绝对路径）或<img src="./logo.png">（冗余点） - 如果
index.html在/pages/下，图片在/assets/images/，那就必须写<img src="../assets/images/logo.png">—— 多一个..少一个..都会断链 - 团队里有人用
./images/、有人用images/，看着一样，但一旦 HTML 入口位置变化（比如从根移到子目录），一半图片就挂了
禁止在组件模板里写 <img> 或内联 background-image
Angular、React、Vue 的组件文件（如 Header.vue）不是资源加载入口，构建工具无法静态分析变量拼接的路径，<img :src="cdnUrl + '/icon.svg'"> 这类写法在构建阶段就报错或运行时白屏。
- 全局共用图（logo、favicon、loading 图标）统一放在
index.html的<head>或<body>底部，用硬编码src - 组件内需要的图，必须由 JS 加载后传入，或通过 CSS 类名控制，而不是在模板里直写
src - CSS 中的
background-image: url(...)同样受限于 CSS 文件所在路径，不要指望它能跨目录“穿透”到项目根；若需复用，把相关 CSS 和图片放同一级，或改用 CSS 自定义属性注入路径
用 document.querySelectorAll('img') 快速验伤，别等上线才翻车
开发阶段最省事的校验方式，不是靠肉眼检查路径，而是让浏览器自己报错。
立即学习“前端免费学习笔记（深入）”；
- 在控制台粘贴执行：
Array.from(document.images).filter(i => i.naturalWidth === 0).map(i => i.src)，立刻列出所有加载失败的src - 加个简单监听，让错误路径直接暴露在 title 上：
<img src="xxx.jpg" onerror="this.title='ERR: '+this.src; this.src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>';"> - CI 流程中可集成 Puppeteer 脚本，启动页面后自动跑一遍图片加载检查，失败即中断构建
最难绷的其实是路径“一致性”——它不难实现，但极容易被忽略。只要 HTML 入口固定、所有 src 都从它出发算相对路径、禁掉模板里的动态图片引用，90% 的图片 404 就不会发生。剩下的 10%，往往是某人偷偷改了 index.html 位置，却忘了同步更新几十个 ../。
