最轻量可靠方案是用onerror属性实现加载失败换源并防死循环，需设this.onerror=null且默认图路径静态可直访；picture中img的src才是最终兜底，必须高可用。

图片加载失败时只显示破碎图标或空白，不是浏览器“坏了”，而是你没给它 fallback 的路径。只要 img 的 src 404 或网络中断，且没做任何处理，就必然裂图。

onerror 属性是最轻量的兜底方案

直接在 img 标签上写 onerror，浏览器加载失败时自动换图，不依赖外部 JS，IE9+ 全支持。

• onerror 只对当前 img 的 src 生效，不监听 srcset 或 ；
• 必须加 this.onerror=null，否则换图后再次触发 onerror，造成无限循环请求；
• 默认图 URL 必须静态可直访（比如 /imgs/default.jpg），不能带查询参数或动态 CDN 转码路径；
• 示例：。

picture 中的 img 是最终渲染载体，不是可选项

结构里， 不是“备选格式”，而是所有 都失败后的唯一渲染出口。它的 src 必须有效，否则整个结构退化为仅显示 alt 文本。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 按顺序匹配：先看 media 是否满足，再尝试加载 srcset 资源；任一成功即停，不再往下；
• 所有 都因 404、跨域或网络中断失败时，浏览器仍会尝试加载 —— 所以这个 src 必须指向一个高可用地址；
• 别把 JPEG 写成第三个 ，它不起兜底作用； 的 src 才是最后一道防线；
• 错误写法： → 最终只显示 alt；正确写法：。

断网或 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 图的宽高、裁剪比例必须和原图一致。否则格式切换或错误替换时，卡片高度突变、布局抖动，比裂图更伤体验。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！