图片降级必须确保src始终指向静态高可用资源，否则浏览器不触发onerror或fallback；结构须合规，为必需兜底且src独立可访问；onerror须内联并立即切断事件链。
图片降级不是“加个 onerror 就能兜住”，而是必须让 src 永远指向一个真实可加载的资源，否则浏览器连 fallback 的机会都不给。
src 必须是静态、高可用地址，不能是空值或动态接口
80% 的“白屏图”问题，根源是 src 本身不可用：写成 src=""、src="broken.jpg"（文件实际不存在）、src="/api/image?uid=123"（断网即失败）——这些都会导致浏览器发请求后卡死或静默失败，根本不会触发 onerror 或降级逻辑。
-
src应始终指向 CDN 托管的占位图（如/img/placeholder.svg）或业务默认图（如/img/avatar-default.png） - SSR 渲染时，
src值必须由服务端直接写出，不能依赖客户端 JS 注入 - 绝对禁止相对路径错误写法：
../images/logo.jpg正确，..images/logo.jpg（漏了/）会解析失败
结构必须合规，![]()
是强制兜底而非可选项
<picture></picture> 是唯一不依赖 JS、不发多余请求、SEO 友好的原生降级方案，但它对结构极其敏感。写错一行，整个标签就退化为纯文本或空白。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<source></source>必须按格式先进到落后排列：type="image/avif"→type="image/webp"→ 最后才是<img src="fallback.jpg"> -
<img>不是第 N 个<source></source>，它是<picture></picture>的必需子元素，且其src必须独立可访问（不能带查询参数，不能是 404 路径） - 服务器返回的
Content-Type必须与type完全一致；Nginx 未配types { image/webp webp; }会导致 .webp 被当成application/octet-stream，浏览器静默跳过
onerror 必须内联且立即切断事件链
onerror 不响应空 src、CORS 阻塞、服务器返回 200 占位图等场景——它只管“请求发出后失败”。动态绑定在 Safari 和旧 Edge 中大概率不触发，document.addEventListener('error') 也捕获不到（不冒泡）。
- 唯一可靠写法：
onerror="this.src='/img/fallback.png'; this.onerror=null" - 更稳妥写法：
onerror="if (!this.src.includes('fallback')) this.src='/img/fallback.png'; this.onerror=null" - 如果连 fallback 图都不可信，直接用 base64 内联：
onerror="this.src='data:image/png;base64,iVBORw0KGgo...'; this.onerror=null"
loading="lazy" 降级失效的根本原因：不支持时只读 src，不读 data-src
浏览器不支持 loading="lazy" 时，它不会报错，也不会自动读取 data-src。它只是忽略该属性，然后照常加载 src。若此时 src 是空、占位图路径错误、或被 CSS 隐藏，结果就是白屏。
-
src必须始终指向可用资源（如 1px GIF、LQIP 图、或 SSR 渲染出的真实小图），绝不能留空或写src="#" -
data-src必须静态写在 HTML 中（不能靠 JS 注入），否则断网时 JS 加载失败，data-src就丢了 - 首屏关键图（如商品主图、头图）应跳过懒加载：直接写死
src，不加loading="lazy"，也不设data-src
最容易被忽略的是：所有格式图片（AVIF/WebP/JPEG）必须尺寸一致、裁剪比例一致，否则切换时会拉伸或跳变；但比这更基础的是——路径一错，连兜底都进不去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
