真正可维护的图片资源管理需语义化属性+js驱动+css布局协同：用queryselectorall选img[data-batch]获静态nodelist，校验src后缀，配picture+documentfragment批量生成响应式图，css grid实现自适应网格，监听error统一降级。
直接用 <img> 硬写一堆路径，不是管理，是埋雷。真正能维护、可扩展的图片资源管理，必须靠语义化结构 + JS 驱动 + CSS 布局协同控制。
用 querySelectorAll 批量选中带标记的图片元素
别依赖 getElementsByClassName —— 它返回实时 NodeList，循环中增删 class 可能漏改或重复遍历。选中逻辑必须稳定、可预测。
- 给所有待管理的图片加统一语义属性，比如
data-batch="gallery"或data-type="product" - 用
document.querySelectorAll('img[data-batch="gallery"]')一次性锁定目标，返回静态 NodeList - 修改
src前先校验路径：检查是否含.jpg、.webp等后缀，避免静默失败 - 设
alt时慎用纯序号（如图 ${i+1}），生产环境建议从配置数组映射，保证语义准确
用 <picture></picture> + DocumentFragment 批量生成响应式图片
<img> 单点控制无法兼顾格式降级、断点适配和懒加载；<picture></picture> 是批量响应式插图的事实标准，但必须 JS 驱动生成，否则没法统一维护。
- 每个图的配置项至少含：
src（JPG）、webp、avif、sizes，缺一不可 -
<source></source>必须显式设type和sizes，尤其 Safari 对type敏感，不写就可能跳过备用源 - 插入顺序按现代优先：先
avif→ 再webp→ 最后<img>兜底 JPG - 千万别在循环里反复
document.createElement('picture')后立刻appendChild，会触发多次重排；应先用DocumentFragment收集，最后一次性挂载
用 CSS Grid 实现自动适配的图片网格布局
Flex 布局做图片网格，最后一行常错位、间隙不均，尤其图片尺寸不一致或动态加载时。Grid 才是二维可控的合理选择。
- 核心声明：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，每列最小 250px，超出自动新增列 - 必须用
gap控制间距，别用margin模拟，否则破坏网格对齐逻辑 - 图片宽高比差异大时，统一加
aspect-ratio: 4/3或包裹一层div并设overflow: hidden防拉伸 - 图文组合用
<figure></figure>包裹，设.gallery-item { display: inline-block; width: 100%; vertical-align: top; }保流，再内部 flex 居中标题
监听 error 事件批量降级并快速定位失败图片
本地开发时路径写错，<img> 只显示小图标或空白，手动排查效率极低。得靠自动化监控补一手。
- 全局监听：
document.querySelectorAll('img').forEach(img => img.addEventListener('error', e => { e.target.src = '/assets/placeholder.svg'; e.target.title = '加载失败: ' + e.target.src; })) - 开发阶段快速定位：控制台运行
Array.from(document.images).filter(i => i.naturalWidth === 0)，直接列出所有未加载成功的<img> - 路径必须全用相对路径，且统一以 HTML 文件所在目录为基准；混用
./images/和images/在嵌套路由下极易失效 - 禁用
onerror内联写法（如<img onerror="">），它每次错误都重新解析字符串，且无法复用逻辑
真正难的不是写出来，而是让每张图的路径、格式、尺寸、错误反馈、布局行为全部可配置、可追踪、可批量切换——这些细节一旦散落在 HTML 里，后期改一个尺寸就得翻十页代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
