src属性是srcset的最终兜底，必须指向真实可访问的JPEG/PNG图片，否则srcset选图失败时将白屏；sizes需严格匹配CSS布局，否则srcset失效；WebP/AVIF兼容性须由picture元素处理，不能依赖srcset。
srcset 本身没有“降级”能力，它只提供多分辨率候选，真正兜底的是 src 属性——漏掉或写错 src，高分辨率图加载失败时就会白屏。
srcset + src 必须成对出现，且 src 指向可直访的 JPEG/PNG
浏览器在 srcset 中选图失败（如网络中断、404、CORS）时，不会尝试下一个候选，而是直接 fallback 到 src。这个 src 必须：
- 指向一个真实可访问的图片 URL，比如
/images/logo.jpg，不能是空值、data:占位符或带查询参数的动态地址（如?format=webp） - 格式必须是广泛兼容的
image/jpeg或image/png，Safari ≤13.1、IE、旧安卓 WebView 才能解码 - 路径需静态存在：部署后能在浏览器地址栏单独打开并显示正常图片，否则 SSR 或 CDN 缓存下极易 404
sizes 属性不匹配会导致 srcset 完全失效
用 w 描述符（如 "logo-400w.jpg 400w, logo-800w.jpg 800w"）时，sizes 不是可选项，而是计算依据。浏览器靠它估算“该在当前视口下加载多宽的图”，算错就选错甚至跳过整个 srcset。
- 常见错误：
sizes="(max-width: 768px) 100vw, 50vw"，但实际容器被 CSS 设为max-width: 600px，导致浏览器永远认为需要 50vw 宽度，错过小图 - 验证方法：Chrome DevTools → Network 面板勾选
Disable cache，刷新后右键图片 →Copy → Copy response，确认返回尺寸是否符合预期 -
sizes值必须和 CSS 布局完全对齐；若布局复杂，宁可用x描述符（如"logo@1x.jpg 1x, logo@2x.jpg 2x"），它不依赖sizes
srcset 不解决 WebP/AVIF 兼容性问题，那是 picture 的事
把 srcset 当成“WebP 自动 fallback 到 JPG”的方案是错的。浏览器看到 srcset="a.webp 2x"，如果它不支持 WebP，根本不会发请求，也不会退到 src —— 因为 srcset 只管分辨率/DPR，不管 MIME 类型。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确做法：用
-
type必须写标准 MIME 类型：image/avif、image/webp、image/jpeg（不是jpg） - 服务器响应头
Content-Type必须与type完全一致，否则 Safari 会静默忽略，Chrome 可能侥幸但不可靠
onerror 补救只对 img.src 生效，且要防无限循环
srcset 加载失败不会触发 onerror，只有最终渲染用的
- 内联写法更可靠：
onerror="this.src='/fallback.jpg'; this.onerror=null;"，不加this.onerror=null会导致备用图也 404 时无限循环 - 别在
onerror里检查naturalWidth：解码失败（文件损坏但 HTTP 成功）时onerror根本不触发，得靠onload后主动读取 - 若连 fallback 图都不可信，直接内联 base64：
onerror="this.src='data:image/svg+xml;base64,PHN2Zy...'; this.onerror=null;"
最易被忽略的一点：所有降级逻辑都建立在 srcset、sizes、onerror 全部失效，用户看到的就是一片空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
