最轻量可靠方案是用onerror属性实现加载失败换源并防死循环，需设this.onerror=null且默认图路径静态可直访；picture中img的src才是最终兜底，必须高可用。
图片加载失败时只显示破碎图标或空白，不是浏览器“坏了”，而是你没给它 fallback 的路径。只要 img 的 src 404 或网络中断，且没做任何处理，就必然裂图。
onerror 属性是最轻量的兜底方案
直接在 img 标签上写 onerror，浏览器加载失败时自动换图，不依赖外部 JS，IE9+ 全支持。
-
onerror只对当前img的src生效，不监听srcset或<source></source>； - 必须加
this.onerror=null，否则换图后再次触发onerror，造成无限循环请求； - 默认图 URL 必须静态可直访（比如
/imgs/default.jpg），不能带查询参数或动态 CDN 转码路径； - 示例：
<img src="user-123.jpg" onerror="this.src='/imgs/default.jpg'; this.onerror=null;" alt="User avatar">。
picture 中的 img 是最终渲染载体，不是可选项
<picture></picture> 结构里，<img alt="HTML图片默认图降级方法" > 不是“备选格式”，而是所有 <source></source> 都失败后的唯一渲染出口。它的 src 必须有效，否则整个结构退化为仅显示 alt 文本。
-
<source></source>按顺序匹配：先看media是否满足，再尝试加载srcset资源；任一成功即停，不再往下； - 所有
<source></source>都因 404、跨域或网络中断失败时，浏览器仍会尝试加载<img src alt="HTML图片默认图降级方法" >—— 所以这个src必须指向一个高可用地址； - 别把 JPEG 写成第三个
<source></source>，它不起兜底作用；<img alt="HTML图片默认图降级方法" >的src才是最后一道防线； - 错误写法：
<img src="broken.jpg" alt="HTML图片默认图降级方法" >→ 最终只显示 alt；正确写法：<img src="/cdn/defaults/avatar.jpg" alt="HTML图片默认图降级方法" >。
断网或 JS 失败时，纯 HTML fallback 才可靠
依赖 JS 初始化懒加载、错误监听或动态替换，一旦网络异常或脚本加载失败，图片就彻底消失。真正健壮的降级必须在 HTML 层就准备好可运行状态。
立即学习“前端免费学习笔记（深入）”；
-
src永远指向一个真实存在的资源：可以是 1px GIF 占位图、LQIP 模糊图，或 SSR 渲染出的小图；绝不能为空或写死无效路径； -
data-src存高清图地址，且必须在初始 HTML 中静态存在（不能靠 JS 注入），否则断网时根本读不到； - 关键图片（如商品主图、头像）建议跳过懒加载，直接写死
src，不设loading="lazy"或data-src； - CSS 层也要配合：避免用
display: none隐藏图片容器（Safari 会跳过懒加载），改用opacity: 0或visibility: hidden。
最容易被忽略的一点：所有 fallback 图的宽高、裁剪比例必须和原图一致。否则格式切换或错误替换时，卡片高度突变、布局抖动，比裂图更伤体验。
