srcset 本身不提供加载失败降级能力，仅基于 DPR、视口和 sizes 单次选择资源，失败后不会尝试其他候选项；必须依赖 src + onerror 或 picture 结构兜底。
srcset 本身不提供加载失败降级能力，它只做资源选择；异常时白屏或破损图，必须靠 src + onerror 或 <picture></picture> 结构兜底。
为什么 srcset 失效时浏览器不会自动 fallback 到其他 srcset 项
浏览器从 srcset 中选一个 URL 是基于设备像素比（dpr）、视口宽度和 sizes 计算出的“最匹配项”，选完就发一次请求。如果这个请求失败（404、超时、CORS 静默阻断），它不会尝试列表里下一个地址——srcset 不是备选池，而是单次决策结果。
- 常见现象：高清屏加载
photo@2x.jpg失败，页面留白，控制台报错，但photo@1x.jpg完全没被触碰 -
sizes缺失时，Chrome 默认按100vw选最大图，网络差时极易超时失败；Safari 可能直接忽略整个srcset属性 - 本地双击打开 HTML（
file://协议）下，srcset基本失效，浏览器跳过解析，只读src
srcset 必须配 src —— 这是唯一可靠的降级入口
src 属性不是可选项，它是所有不支持 srcset 的环境（IE11、旧 WebView、file://）的强制兜底，更是加载失败时 onerror 唯一能安全替换的目标。
-
src必须指向一个真实存在、HTTP 200、无需鉴权的静态资源，例如/img/fallback.jpg或内联 base64：data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAi... - 禁止写空值：
src=""、src="#"、src="broken.jpg"（且该文件未部署）——这些都会导致 onerror 无法触发或触发后无路可退 - 不要把
src当占位符写成低质量图再靠 JS 替换：首次渲染依赖它，它必须能独立撑起视觉完整性
onerror 绑定要防循环，且必须在 HTML 内联
动态绑定 onerror（如 JS 里 img.addEventListener('error', ...)）在 JS 加载失败或执行延迟时完全失效。真正起作用的是 HTML 中内联、带状态标记、立即解绑的写法。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 基础安全写法：
onerror="if (!this.dataset.attempted) { this.dataset.attempted = '1'; this.src = '/img/placeholder.svg'; }" - 路径风险更高时，直接内联 SVG：
onerror="this.src='data:image/svg+xml;base64,...'; this.onerror=null;" - 动态创建的
<img alt="HTML中srcset加载异常怎样降级？有效应对策略" >元素，onerror必须在appendChild()前设置，否则首次错误捕获不到 - 不要用
this.onerror = null单独解绑：若 fallback 图也失败，会静默卡住；必须配合dataset标记做状态判断
更健壮的方案：用 替代纯 srcset
当你要同时解决格式不支持（如 Safari 不认 AVIF）和加载失败两个问题时，<picture></picture> 是唯一标准路径。它的降级是结构化的：先按 type 和 media 匹配 <source></source>，都不匹配则回退到内部 <img alt="HTML中srcset加载异常怎样降级？有效应对策略" > 的 src，而这个 src 本身又可配 onerror。
-
<source></source>的type必须写完整 MIME 类型：image/avif，不能简写为avif - 顺序必须从强到弱：
<source type="image/avif"></source>→<source type="image/webp"></source>→ 最终<img src="fallback.jpg" alt="HTML中srcset加载异常怎样降级？有效应对策略" > -
<img alt="HTML中srcset加载异常怎样降级？有效应对策略" >的src仍需满足前述要求：静态、高可用、可被onerror安全接管 - 服务器返回的响应头
Content-Type必须与type严格一致，否则浏览器直接跳过该<source></source>
真正容易被忽略的是：所有降级都建立在“src 永远可加载”这个前提上。一旦这个基础动摇，srcset、<picture></picture>、onerror 全部失效——它们不是替代关系，而是层层托底的协作链。
