html无内置图片管理工具，需用js控制dom、语义化html结构（如data-batch）和css策略实现批量操作、响应式降级与自动监控。
HTML 本身没有“图片管理工具”这个内置概念——所谓提升效率，本质是用 JS 控制 DOM + 合理 HTML 结构 + 配套 CSS 策略，把图片从静态标签变成可批量操作、可响应式降级、可自动监控的资源单元。
用 document.querySelectorAll 批量选中带语义标记的图片
别依赖 getElementsByClassName 或 getElementsByTagName('img')：前者返回实时 NodeList，循环中增删 class 可能漏改；后者会抓到所有 img（包括图标、装饰图），干扰逻辑。
实际做法是给需要统一管理的图片加语义属性，比如：
@@##@@ @@##@@
然后用：
-
document.querySelectorAll('img[data-batch="product"]')一次锁定目标集 - 遍历时先验证
src是否含有效后缀（.jpg、.webp），再赋值，避免静默失败 - 设
alt时优先从配置数组映射，而不是硬写图 ${index + 1}，否则语义丢失、SEO 和无障碍都受损
用 DocumentFragment 批量挂载 <picture></picture> 元素
单纯用 <img data-batch="product" src="p1.jpg" alt="产品A"> 标签无法做格式降级（AVIF → WebP → JPG）和断点适配；但手写一堆 <picture></picture> 又难维护。必须靠 JS 生成，且不能边建边插。
常见错误是循环里反复调用 document.createElement('picture') 然后立刻 appendChild，这会触发多次重排，卡顿明显。
- 正确做法：新建
DocumentFragment，所有<picture></picture>节点先 append 到它里面 -
<source></source>必须显式写type（如image/avif）和sizes，Safari 不认没type的<source></source> - 顺序按现代→旧版排列：
<source type="image/avif"></source>→<source type="image/webp"></source>→<img data-batch="product" src="p2.jpg" alt="产品B">，确保降级可靠
监听 error 事件实现加载失败自动降级
开发时一堆小图标的页面，大概率是路径错了，但光看 alt 文字没法判断是路径错还是图真没了。手动查太慢，得自动化。
- 全局注册一次即可：
document.querySelectorAll('img').forEach(img => img.addEventListener('error', e => { e.target.src = '/assets/placeholder.svg'; })) - 开发阶段快速定位：在控制台跑
Array.from(document.images).filter(i => i.naturalWidth === 0)，直接列出所有加载失败的img - 路径必须全用相对路径，且统一以 HTML 文件所在目录为基准；混用
./images/和images/在嵌套路由下必出问题 - 别用
onerror内联写法（如<img>），每次错误都要重新解析字符串，逻辑也无法复用
更新图片时加时间戳或哈希破缓存
JS 修改了 img.src，但浏览器没重载——不是代码没跑，是缓存生效了。尤其上传新图后还显示旧图，用户以为功能坏了。
- 临时方案：加时间戳
img.src = 'avatar.jpg?t=' + Date.now()，简单但可能绕过 CDN 缓存 - 生产推荐：服务端返回带内容哈希的文件名，如
avatar.a1b2c3.jpg，连文件名都变了，彻底规避缓存问题 - 如果服务端返回的是 base64 字符串，必须补全前缀：
img.src = 'data:image/jpeg;base64,' + base64String，漏掉就空白 - 框架里（Vue/React）要加
key强制更新节点，纯 JS 操作 DOM 不存在这个问题，但重复赋相同src会导致无效果
真正卡住人的从来不是单张图怎么插，而是批量操作时 DOM 重排、缓存策略、路径基准、错误不可见这些细节——它们不报错，但让整个流程变脆、难调试、上线就翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
