srcset本身不提供加载失败降级能力，仅用于资源选择；图片加载失败时浏览器不会尝试其他候选地址或回退到src，必须依赖picture+source+img组合实现真正降级。
srcset 本身不提供加载失败降级能力
只写 srcset 和 sizes，图片加载失败（404、CORS、CDN 返回空内容）时，浏览器不会自动尝试列表里的其他地址，也不会 fallback 到 src——它只会卡在破损图标或空白。这是最常被误解的一点：srcset 是“资源选择”，不是“失败重试”。
-
src属性仍是必需的：它是所有不支持srcset的旧浏览器（如 IE11）和部分 WebView 的唯一入口，必须指向一个真实可访问的兜底图（比如已压缩的photo.jpg） - 不要把
src留空或设为占位符路径（如data:image/gif;base64,R0l...），否则在不支持srcset的环境里会白屏 -
srcset中每个候选图都必须带明确的宽度描述符（400w）或像素密度描述符（2x），混用或漏写会导致整组被 Chrome/Safari 忽略 - 如果服务器对某个
srcset地址返回了非图像响应（比如 404 HTML 页面），控制台报错但不会跳到下一个候选项
真正起作用的降级必须靠 picture + source + img 组合
要让浏览器在格式不支持、资源加载失败、甚至解码出错时还能继续走下一步，唯一标准方案是 <picture></picture>。它的降级逻辑是顺序匹配 + 强制兜底，不是“选一个”，而是“按优先级逐个试，最后必须有结果”。
-
<source type="image/avif"></source>必须写完整 MIME 类型，image/avif错写成avif或.avif，Safari 直接跳过整条<source></source> - 所有
<source></source>必须放在<img alt="HTML页面中使用srcset如何降级？通用解决方案" >标签之前，且<img alt="HTML页面中使用srcset如何降级？通用解决方案" >必须是<picture></picture>的最后一个子元素；否则降级链断裂，页面可能空白 -
<img src="fallback.jpg" alt="HTML页面中使用srcset如何降级？通用解决方案" >的src必须真实可访问——它不是“备选”，而是最终强制渲染项；404 就等于整个降级失效 - 服务器对 AVIF/WebP 请求返回的
Content-Type必须精确匹配（如image/avif），返回application/octet-stream或错误类型，浏览器会解码失败并静默中断，不跳下一个<source></source>
onerror 是唯一能响应加载失败的 JS 补救手段
当 <img alt="HTML页面中使用srcset如何降级？通用解决方案" > 的 src（包括 <picture></picture> 最终 fallback 的那个）加载失败时，onerror 是唯一可靠触发的时机。但它不能替代 HTML 原生降级，只能做最后一道防线。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 直接在标签里写
onerror="this.src='placeholder.png'"最简单，但必须加 guard 防循环：onerror="if (!this.dataset.fallback) { this.dataset.fallback = '1'; this.src = 'placeholder.png'; }" - 备用图地址建议用绝对路径或 CDN 上的稳定资源，避免相对路径因路由变化失效
- 不要在
onerror回调里再加载高清图或未压缩资源——应指向已压过的 WebP/PNG，否则弱网下雪崩式重试 - 若 fallback 图也失败，
onerror会再次触发；此时建议插入内联 SVG 占位（无 HTTP 请求）或退化为纯文本提示，而非留空
开发阶段必须验证实际加载的是哪个 URL
光看页面显示正常没用。很多降级看似生效，实则浏览器根本没按你写的逻辑选图——比如写了 sizes="(max-width: 768px) 100vw"，但 CSS 把容器限制在 600px 宽，浏览器仍按 100vw 加载大图。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Network → 勾选
Disable cache和Large rows，刷新后直接看请求 URL 和响应大小 - 用设备模拟器切换 DPR（iPhone 12=3x、Mac Retina=2x），观察加载图是否随 DPR 变化；不变说明
srcset/sizes没生效 - 手动 curl 检查
Content-Type：curl -I https://yoursite.com/photo.avif，确认返回的是image/avif而非text/html或application/octet-stream - IE11 或老 Android WebView 下，直接禁用 JS 后刷新，看是否还能渲染出
<img alt="HTML页面中使用srcset如何降级？通用解决方案" >的src图——这是检验兜底是否真可用的硬标准
