srcset未触发降级主因是匹配逻辑失效：sizes缺失或错配导致浏览器误判渲染宽度，混用w/x描述符致整条被忽略，src为空或404使fallback失败，原图真实宽度与w值不符造成选图错位。
srcset 为什么没触发降级
浏览器不按你写的分辨率加载 srcset 中的图，大概率不是“没降级”，而是它压根没进入降级逻辑——srcset 本身不处理加载失败，只做“匹配优先”。它选中某一项后，如果这张图 404 或解码失败，浏览器不会自动切到列表里下一张，而是直接 fallback 到 src 属性值。
常见错误包括：
-
sizes缺失或写成固定值（如"100vw"），导致浏览器误判渲染宽度，永远选最大图 -
srcset混用w和x描述符（比如"a.jpg 400w, b@2x.jpg 2x"），整条属性被忽略 -
src属性为空、为"#"或指向一个 404 资源，导致最终 fallback 失效，页面白屏 - 原图文件真实宽度与
srcset中写的400w不一致（例如标了400w，实际是 800px 宽），sizes计算出的目标尺寸错位
srcset + sizes 必须配对使用
sizes 不是可选项，它是让 srcset 生效的前提。浏览器靠它预估图片在当前布局中会占多宽，再从 srcset 列表里挑最接近的资源。不写 sizes，Chrome 默认按 100vw 加载，Safari 可能直接跳过整个 srcset。
正确写法示例：
@@##@@
关键点：
-
sizes中每个断点必须和 CSS 实际生效的容器宽度对齐，不能凭感觉写 - 所有
srcset项统一用w描述符，不要掺x -
src必须指向一个真实可用、格式兼容性广的图（如.jpg），IE11 等旧浏览器只认它
srcset 不解决格式不支持问题
如果你把 src="photo.avif" 和 srcset="photo.avif 1x, photo.webp 2x" 一起用，Safari 15 以下、IE、部分 Android WebView 会直接空白——因为它们根本不认识 .avif 格式，也不会尝试 srcset 里的其他项。
格式降级必须用 srcset 只管同一格式下的分辨率/密度适配。正确做法：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<picture><source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp"> @@##@@ </source></source></picture>
注意：
-
type必须是完整 MIME 类型，image/avif写成avif就失效 -
src、且该地址必须可访问 -
onerror 替换 src 不是 srcset 降级的一部分
onerror 是运行时补救，不是 srcset 的延伸机制。它发生在浏览器已决定加载某张图、并确认失败之后，用户已经看到破损图标或白框。这时候再换 src，体验是割裂的。
如果非要加，务必防循环：
@@##@@
要点：
- 别在
onerror里无条件重设this.src，否则 fallback 图也 404 会无限触发 - fallback 图地址建议用绝对路径或 CDN 地址，避免相对路径在嵌套路由下 404
- 不要指望
onerror区分失败类型（404 / CORS / 解码失败），它只告诉你“这次加载挂了”
真正关键的，是把 src 本身设为高可用兜底，而不是寄希望于 JS 补救。很多线上白屏问题，根源就是 src 指向了一个并不存在的占位图路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
