srcset 本身不提供降级能力，仅负责择优加载；降级依赖 src 属性——当所有 srcset 候选失败时才回退到 src；漏写 src、配错 sizes 或混用描述符均会导致兜底失效。
直接说结论：srcset 本身不提供“降级”能力，它只负责“择优加载”；真正的降级靠的是 src 属性——浏览器在 srcset 所有候选都失败（或无法解析）时，才会回退到 src。写错 sizes、混用描述符、漏掉 src，都会让这层兜底失效。
srcset + sizes 配错导致高分辨率图被强制加载
常见错误是只写 srcset 不配 sizes，或把 sizes 写成固定值如 "100vw"。浏览器会按视口宽度估算渲染宽度，哪怕用户用的是 320px 宽的低端手机，也可能选中 1200w 或 2x 图。
-
sizes必须反映图片**实际渲染宽度**，不是容器宽度；典型写法：sizes="(max-width: 768px) 100vw, 50vw" -
srcset中所有项必须统一用w描述符（如photo-400.jpg 400w），混用x和w（如a.jpg 400w, b.jpg 2x）会让整个列表被忽略 - 不写
sizes时，Chrome 默认 fallback 到100vw，Safari 可能直接跳过srcset，只加载src
IE 和旧 WebView 下 srcset 完全被忽略，但 src 必须可用
IE8–IE11、Android 4.3 前 WebView 等老旧环境根本不解析 srcset 和 sizes，只会加载 src 指向的图。这不是兼容性“差”，而是解析器直接跳过这些属性。
-
src必须指向一个真实可访问的资源，比如 CDN 托管的 800w 主图、或已压过的 JPG/PNG 占位图；绝不能是空值、"#"、""或错误路径 -
srcset可以保留，仅用于现代浏览器；它的存在不影响 IE 行为，前提是src自身有效 - 本地双击打开 HTML 时，
src="logo.png"常因路径解析失败而 404，改用src="./logo.png"或根相对路径src="/images/logo.png"更可靠
为什么加了 srcset 还是白屏？检查这三处
白屏往往不是格式问题，而是路径或结构错误导致浏览器连兜底图都拿不到。最常翻车的是 src 路径和 srcset 中各候选路径不在同一上下文里解析，结果一个能加载、其余全 404。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 统一用根相对路径：
src="/images/photo.jpg"、srcset="/images/photo-400.jpg 400w, /images/photo-800.jpg 800w" - 避免混用层级：不要
srcset="img/photo.webp"却写src="./images/photo.jpg"——前者按 HTML 当前目录算，后者显式声明当前目录，嵌套路由下极易错位 - 大小写敏感：Linux 服务器上
LOGO.JPG ≠ logo.jpg，路径错一个字母就是 404；Network 面板里看请求 URL 是最准的验证方式
onerror 动态换 src 不是 srcset 降级，只是最后一道防线
onerror 在 srcset 加载失败后不会触发——它只响应 src 的加载失败。也就是说，如果 srcset 里某张图 404，但 src 还活着，onerror 就永远不会执行。
- 内联写法
onerror="this.src='fallback.jpg'"不推荐：无法传参、无法状态判断、CSP 严格策略下会被屏蔽、fallback.jpg再失败会无限循环 - 正确做法是绑定事件监听器，并加防重入标记：
img.dataset.attempted = "true"，且备用图应是已压缩过的 WebP 或 PNG，而非另一张未处理的大图 -
onerror对路径语法错误、空src、CORS 阻塞、服务器返回 200 占位图等场景完全无感——它救不了设计缺陷，只能补运行时意外
最容易被忽略的点是：你写的 srcset 是否真被浏览器当成候选？打开 DevTools → Network → 刷新 → 筛选 img，看实际发出的请求是否匹配你写的 w 值和 sizes 计算逻辑。别信“看起来像对了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
