图片路径错误主因是未统一以html文件为基准的相对路径，必须禁用混用写法；alt为必填语义字段，缺失或语义不当将影响seo、无障碍及错误兜底；目录结构混乱则导致srcset等规模化方案失效。
图片资源结构混乱，不是路径写错就是加载失败后一片空白——根本原因是没把 src、alt、目录组织和错误兜底当成一个系统来管。
图片路径必须统一用相对路径，且以 HTML 文件为基准
很多人在 index.html 里写 src="./images/logo.png"，换到 /blog/post.html 就崩了，因为 ./ 指的是当前 HTML 所在目录。真正稳定的写法是：
- 所有 HTML 文件放在同一级（如全部在根目录），图片统一放
./assets/img/ - 或用
<base href="/">配合绝对路径前缀，比如src="assets/img/photo.jpg" - 禁止混用
images/和./images/，VSCode 的全局搜索src=".*?"能快速暴露不一致
alt 不是可选字段，它直接决定图片是否“存在”
搜索引擎、屏幕阅读器、甚至 Chrome DevTools 的无障碍检查都依赖 alt。空 alt="" 表示该图纯装饰，非空则必须描述内容本身，而不是文件名或“图片”。常见错误：
-
alt="logo.png"→ 错，没语义 -
alt="公司Logo"→ 可接受，但更好是alt="Acme 公司品牌标识，蓝色渐变字母A" -
alt缺失时，img在 Lighthouse 里直接扣分，且onerror降级逻辑可能失效
用 onerror + 控制台命令快速定位坏链
开发阶段别等用户反馈——加一行 onerror 就能暴露问题：
@@##@@
再配合控制台执行：
Array.from(document.images).filter(i => i.naturalWidth === 0).map(i => i.src)
立刻列出所有加载失败的 src。注意：naturalWidth === 0 比检查 complete === false 更可靠，尤其对 CORS 图片。
CSS Grid 网格 + figure 是管理多图布局的最小可靠单元
用 div 堆图片会失控，flex-wrap 断行错位，而 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 能自动适配列数。关键细节：
- 每个图必须用
<figure class="gallery-item"><img src="assets/img/team-2024.jpg" alt="团队合影" onerror="this.classList.add('broken'); this.title='❌ '+this.src;"><figcaption></figcaption></figure>包裹，figcaption默认块级，不包裹就换行 -
gallery-item设display: inline-block比display: contents兼容性好，Safari 14.1 以下不支持后者 - 图片宽高比不一时，加
aspect-ratio: 4/3或父容器overflow: hidden，避免拉伸变形
最常被跳过的其实是目录结构本身：没有 /assets/img/ 这种约定，srcset 和 picture 就没法规模化维护；没强制 alt 内容规范，自动化无障碍测试就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
