用相对路径+统一assets目录结构+规范alt属性即可稳定管理图片，避免散乱丢失；禁止混用./和无./路径，alt须描述实质内容，CSS用max-width:100%替代宽高属性，配合loading="lazy"和onerror快速排错。
直接用相对路径 + 统一目录结构 + img 标签基础属性组合，就能让图片素材在项目里不散、不丢、不乱引——其他花哨方案反而容易在协作或迁移时翻车。
图片路径必须用相对路径，且以 HTML 文件为基准
所有 src 值都该从当前 HTML 文件所在目录开始算起，比如 src="assets/images/logo.png" 或 src="../public/icons/home.svg"。混用 ./images/ 和 images/ 看似一样，但某些构建工具或服务器会因入口 HTML 位置不同而解析失败。
- 根目录下放一个
assets文件夹，里面再分images、icons、illustrations等子目录，比全堆在img/里更易维护 - 避免在路径里写死域名或协议（如
https://），除非是明确的 CDN 外链资源 - VSCode 中可右键图片文件 → “Copy Relative Path”，粘贴进
src属性，基本零出错
alt 属性不是摆设，得写内容实质，别写“图片”“图标”
alt 是唯一能被屏幕阅读器读出、被搜索引擎索引、且图片加载失败时唯一可见的文字。写成 alt="公司Logo" 比 alt="logo" 更准确；alt="用户头像：张三，2024年入职" 比 alt="头像" 有用得多。
- 装饰性图片（比如纯背景分割线）应设
alt=""，告诉辅助技术“忽略它” - 如果图片本身就是文字截图（如活动海报），
alt要完整复述文字内容，不能省略 - 生成静态页面时，可用脚本批量检查空
alt：document.querySelectorAll('img:not([alt])').length
响应式图片优先用 max-width: 100% + height: auto，别依赖 width/height 属性
直接在 img 标签里写 width="600" height="400" 容易导致拉伸变形，尤其当图片原始比例和设定值不一致时。CSS 控制更可靠，也方便后续统一调整。
立即学习“前端免费学习笔记（深入）”；
- 全局加一段：
img { max-width: 100%; height: auto; }，父容器有宽度限制时自动缩放 - 需要等比裁剪（比如头像网格），用
object-fit: cover配合固定宽高容器，而不是靠 JS 计算缩放 - 懒加载直接加
loading="lazy"属性，现代浏览器原生支持，不用额外库
图片加载失败时，靠 onerror 快速定位，别只靠肉眼找
开发阶段最常遇到的是路径写错、文件名大小写不符（Linux 服务器敏感）、或构建后路径被重写。单靠看页面缺图太慢，得用代码筛。
- 临时加一句：
<img src="xxx.jpg" onerror="console.warn('MISSING:', this.src)"> - 控制台运行：
Array.from(document.images).filter(i => i.naturalWidth === 0).map(i => i.src)，立刻列出所有挂掉的链接 - 降级占位图建议用内联 SVG（如
data:image/svg+xml,<svg...>），体积小、无请求、不怕跨域
真正难的不是怎么放图，而是所有人遵守同一套路径规则和 alt 写法。一旦项目多人协作或交接，目录混乱、alt 全是“placeholder”、一堆 404 图片还开着 console.warn，排查成本远高于初期多花两分钟规范命名和路径。
