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 组合
要让浏览器在格式不支持、资源加载失败、甚至解码出错时还能继续走下一步，唯一标准方案是
-
image/avif错写成avif或.avif，Safari 直接跳过整条 - 所有
-
src必须真实可访问——它不是“备选”，而是最终强制渲染项；404 就等于整个降级失效 - 服务器对 AVIF/WebP 请求返回的
Content-Type必须精确匹配（如image/avif），返回application/octet-stream或错误类型，浏览器会解码失败并静默中断，不跳下一个
onerror 是唯一能响应加载失败的 JS 补救手段
当 src（包括 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 后刷新，看是否还能渲染出
src图——这是检验兜底是否真可用的硬标准
关键点在于：降级不是“多写几个地址就行”，而是每一层都必须真实可访问、格式声明准确、且有明确的 fallback 承诺。最容易被忽略的是服务器响应头和兜底图的部署状态——它们不出问题时一切正常，一出问题就是大面积白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
