图片资源管理是构建、引用、加载到缓存的全链路协同，根本原因在于浏览器按html物理位置解析src路径，而非url或开发直觉；路径错位、大小写敏感、构建工具未处理模板内路径、cdn缓存未同步等均会导致404。
直接结论：图片资源管理不是“放对路径就行”，而是从构建、引用、加载到缓存全链路协同的结果。单点优化（比如只压缩）效果有限，真正卡住上线后 404 或缓存失效的，往往是路径解析逻辑和构建流程错位。
为什么 src 写对了还是 404
根本原因在于浏览器解析 src 的基准是 HTML 文件在磁盘上的物理位置，不是 URL 路径，也不是你开发时“以为”的相对关系。
- HTML 在
/pages/article.html，想引用根目录下/assets/logo.svg，必须写src="../assets/logo.svg"—— 少一个../就 404 - 本地双击打开
file://协议下路径容错高，一上服务器走 HTTP 就立刻暴露路径错误 - Linux 服务器大小写敏感：
IMG.PNG和img.png是两个文件；Windows 开发时没问题，部署就挂 - 绝对路径写成
/assets/logo.svg看似省事，但开发期双击打开会变成file:///assets/logo.svg，直接报net::ERR_FILE_NOT_FOUND
构建工具里图片路径怎么不被“丢掉”
Webpack/Vite/Angular CLI 这类工具在编译阶段只静态分析 index.html，组件模板（如 header.component.html）里的 src 不参与资源收集和哈希注入。
- 你在组件里写
<img src="assets/logo.svg">，打包后路径不会自动替换成带 hash 的版本（如logo.a1b2c3.svg） - 第三方 CSS/JS 不能塞进组件模板，否则构建时报
NG2008: Could not find stylesheet file或运行时请求{{cdnUrl}}/bootstrap.css - 所有全局资源（Bootstrap、字体、CDN 链接）必须硬编码进
index.html的或底部 - CDN 地址要写死，例如
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css，别拼process.env.CDN_BASE + '/bootstrap.css'
loading="lazy" 和 srcset 怎么配着用才不翻车
懒加载和响应式图片不是开关一开就完事，它们对 DOM 结构、占位空间、浏览器兼容性都有隐性要求。
-
loading="lazy"只对非首屏图片有效，首屏图加了反而可能延迟渲染；Chrome 100+ 支持，旧版 Safari 需 fallback 到 IntersectionObserver -
srcset必须配合sizes才能真正按视口选图，光写srcset="small.jpg 480w, medium.jpg 768w"没用 —— 浏览器不知道你这张图在页面里占多大宽度 - 用
<picture></picture>时，<source></source>的media查询要覆盖完整断点，漏掉min-width: 1200px可能导致桌面端加载移动端小图 - 所有懒加载图片必须有固定宽高（
width/height属性或 CSSaspect-ratio），否则加载时页面会跳动
长期缓存为什么形同虚设
HTML 里写的路径没变，但实际部署的图片文件名带 hash，两者不匹配，浏览器就永远拿不到新资源。
- 所谓“持久化链接”靠的是 URL 稳定 + 服务端
Cache-Control响应头协同，不是靠改写法 - 如果构建后 HTML 里仍是
logo.svg，而服务器上实际是logo.a1b2c3.svg，那无论你怎么设max-age=31536000都没用 - 只有
index.html能被插件（如html-webpack-plugin）自动注入正确哈希路径；组件模板、JS 动态拼接的src全部无法被识别和替换 - 上线前务必检查 Network 面板：所有图片请求状态码是 200 还是 304？响应头里有没有
Cache-Control: public, max-age=31536000？
最常被忽略的一点：路径问题从来不是纯前端问题，它横跨开发、构建、部署三阶段。哪怕你把 srcset 写得再标准，只要构建产物没进 index.html，或者 CDN 缓存没清干净，用户看到的就还是旧图或 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
