HTML图片管理核心是“有据可查、按需加载、错位可控”：统一用data-属性选中静态NodeList，校验路径后赋值，alt动态映射，批量响应式图用DocumentFragment+picture标签，路径全用相对且以HTML为基准，MIME类型须匹配，全局监听error降级，懒加载用loading="lazy"并预留尺寸。
精简管理 HTML 中的图片资源，核心不是删文件，而是让每张图都“有据可查、按需加载、错位可控”。靠手动改 src 或堆一堆 img 标签只会越管越乱。
用 data- 属性 + querySelectorAll 批量锁定目标
硬编码路径或靠类名批量操作容易误伤——比如 getElementsByClassName('thumb') 返回实时集合，循环中增删 class 会跳过后续元素。
- 统一加语义化标记：
- 选中时用
document.querySelectorAll('img[data-batch="product"]')，返回静态 NodeList，遍历安全 - 修改前先校验路径：
if (newSrc.includes('.webp') || newSrc.includes('.jpg')) { el.src = newSrc; }，避免静默失败 - alt 文本别写死，从配置数组映射：
el.alt = productMap[el.dataset.id]?.title || '商品图片';
用 DocumentFragment 生成 picture，不触发多次重排
单张图用 img 就够了，但批量响应式图必须上 picture。直接在循环里反复 appendChild 会强制浏览器重排，卡顿明显。
- 每个图配置至少含：
src（JPG）、webp、avif、sizes -
source必须显式设type：type的备用源 - 顺序按现代优先：AVIF → WebP → JPG，兜底
img标签不能少 - 先创建
DocumentFragment，循环中fragment.appendChild(picture)，最后一次性挂载到 DOM
路径全用相对路径，且以 HTML 文件为基准
混用 ./images/ 和 images/ 看似一样，但在嵌套路由（如 /pages/detail.html）下会 404；绝对路径 /assets/ 更危险，部署到子路径就全崩。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 假设
index.html和logo.png同级，就写src="logo.png"，别加./ - 如果
about.html在/pages/下，要引用根目录的图，写src="../logo.png" - 路径里禁用空格和中文，URL 编码后难调试，也容易被某些构建工具截断
- 服务器返回的 MIME 类型必须匹配：WebP 要
image/webp，AVIF 要image/avif，否则备用源失效
错误监听 + 控制台一键排查，别靠肉眼找 404
开发阶段大量图显示小图标，不是 alt 没写好，是路径错了。等上线才发现，已经晚了。
- 全局监听错误并降级：
img.addEventListener('error', e => { e.target.src = '/placeholder.svg'; }) - 慎用内联
onerror： - 控制台快速定位：
Array.from(document.images).filter(i => i.naturalWidth === 0)，直接列出所有未加载成功的img - 懒加载图要预留占位尺寸，否则加载时布局跳动；
loading="lazy"原生支持就行，别自己写滚动监听
真正难的不是写对一行 src，而是让整套路径规则、格式策略、错误反馈在不同页面、不同构建环境下保持一致。一旦入口 HTML 位置变了，或者新增一个子路由，所有相对路径都要重新验证——这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
