图片资源管理依赖路径组织、标签语义和加载策略，核心是严格使用相对于html文件的合法路径，确保跨环境可移植；alt为强制语义属性，响应式按需启用，避免滥用srcset和picture。
图片资源管理不是靠“配置”实现的，而是靠路径组织、标签语义和加载策略共同约束出来的结果。直接写死路径或盲目依赖构建工具重写，反而会让图片在开发、预览、部署各阶段频繁失效。
img src 路径必须相对于 HTML 文件位置解析
浏览器解析 src 时，永远以当前 HTML 文件所在目录为起点，不是以项目根目录、不是以服务器根目录、也不是以 JS 执行位置。这是 90% 图片不显示的根本原因。
- HTML 在
/pages/about.html，想引用/assets/logo.png→ 必须写src="../assets/logo.png" - HTML 和图片都在
/根目录 → 直接写src="logo.png"，./logo.png也行但没必要 - 子目录下图片（如
/images/photo.jpg）→ 写src="images/photo.jpg"，注意大小写和扩展名不能错 - Windows 本地双击打开 HTML 时，
\分隔符无效，一律用/
不要用 file:// 协议硬指本地硬盘路径
file:///D:/project/images/icon.jpg 这类路径只在你本机双击打开时可能生效，一旦用 live-server、Vite 或部署到 Nginx，就彻底 404。它违反了前端资源可移植性原则，且现代浏览器会主动拦截或静默失败。
- 开发阶段就应模拟真实部署结构：把图片放进项目目录树，用相对路径引用
- 若需快速预览本地图，用 Python
python -m http.server或 VS Code Live Server 插件，而非双击 HTML - 构建工具（如 Vite）会自动处理 public 目录下的静态资源，但前提是路径本身是合法相对路径
alt 属性不是可选项，是强制语义要求
缺失 alt 不仅影响无障碍访问和 SEO，更会导致部分屏幕阅读器跳过该 <img> 元素——相当于页面内容被“删除”。而且某些 CMS 或静态站点生成器会因缺少 alt 拒绝构建。
-
alt=""是合法的，表示该图纯装饰、无信息量（如分隔线、背景花边） - 含信息的图必须描述功能或内容，例如
alt="微信支付二维码，扫码完成付款"，而非alt="二维码" - 不要堆砌关键词，也不要写“图片：xxx”，屏幕阅读器已明确告知这是图像
响应式与备用方案要按需启用，别套模板
多数静态页面根本不需要 <picture></picture> 或复杂 srcset。滥用反而增加维护成本，还可能因漏写 sizes 导致高分辨率图在小屏上全量下载。
- 适配不同屏幕宽度？优先用 CSS：
img { max-width: 100%; height: auto; } - 只需支持 2x 屏幕？加一行
srcset="logo@2x.png 2x"就够，不用 w 描述符 - 外部图可能挂掉？加
onerror="this.src='fallback.png'; this.alt='加载失败'"，但 fallback 图必须是本地相对路径 - Network 面板看到 404，先点开
src值右键“在新标签页打开”，验证 URL 是否真能直连
真正难的不是语法，而是每次新增一张图时，都得确认三件事：这张图放在哪一级目录、HTML 在哪一级目录、两者之间的相对关系有没有被构建流程悄悄改写。路径一错，所有后续优化都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
