srcset本身不降级，真正兜底靠src属性；若src缺失或不可用，旧浏览器、断网或JS失败时图片将白屏。它只负责根据设备条件选图，不处理加载失败，必须配sizes且统一用w描述符，src须始终指向可用轻量资源。

srcset 本身不降级，它只做“选图”，真正兜底靠的是 src 属性 —— 如果你没写 src，或写的 src 不可用，那在旧浏览器、JS 失败、断网、甚至部分懒加载场景下，图片就直接白屏。

为什么 srcset 单独用会白屏

很多开发者以为写了 srcset 就万事大吉，结果在 IE11、旧版 Safari、断网重试、或 SSR 渲染失败时发现图片消失。这是因为：

• srcset 是增强型属性，IE11 及更早版本完全忽略它，只读 src
• Chrome/Firefox 在禁用 JS 或资源加载中断时，也不会 fallback 到其他 srcset 项 —— 它只会尝试当前选中的那个 URL，失败就报错，不会自动换一个
• 如果 src 是空字符串、"#"、或指向一个 404 资源，浏览器连 fallback 都没有，直接渲染空白

srcset + sizes 必须配对写，否则选图逻辑失效

只写 srcset 不写 sizes，等于把决策权交给浏览器瞎猜 —— 大多数浏览器默认按 100vw 计算渲染宽度，结果小屏手机也拉取 2000w 的图，既慢又容易超时失败。

• sizes 不是“建议尺寸”，而是告诉预加载器：“这张图在页面里实际占多宽”，必须反映真实布局，例如：sizes="(max-width: 768px) 100vw, 50vw"
• srcset 中所有项必须统一用 w 描述符（如 photo-400w.jpg 400w），混用 x（如 photo.jpg 2x）会让 Chrome/Safari 直接忽略整组 srcset
• 每个 srcset 值后面必须带宽度单位，不能只写路径；漏掉单位或单位错位（如写成 400 而非 400w）会导致匹配失败

src 是强制 fallback，不是可选项

无论你用了多复杂的 srcset，src 都必须存在、可用、轻量。它不是“备用”，而是整个链路的最终防线。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 推荐用主站同域下的 1px GIF（如 /img/blank.gif）或 LQIP 模糊图，确保 HTTP 状态码为 200，且 CDN 或静态服务长期可用
• 绝对不要写相对路径错误的 src，比如 src="images/logo.jpg" 却没建 images/ 目录；也不要依赖第三方图床，一旦挂掉就全崩
• 如果这张图是首屏关键图（如商品主图、登录页 banner），src 就该直接指向一个已压缩、尺寸合理的 JPEG/PNG，跳过所有懒加载和 JS 介入

常见踩坑：srcset 写对了，但图片还是不加载

现象是 Network 面板里压根没发请求，或请求返回 404 —— 这往往不是 srcset 问题，而是更底层的配置或环境干扰：

• 图片容器被 display: none 包裹：Safari 和多数 Android WebView 会跳过该元素，后续即使 show 也不触发加载
• 父级有 opacity: 0 或 visibility: hidden：部分浏览器仍会加载，但某些低版本 WebView 会抑制请求
• 没设宽高或 aspect-ratio：图片加载前高度为 0，可能被 CSS 折叠或被 JS 判断为“不在视口”，导致 IntersectionObserver 不触发
• loading="lazy" 和 srcset 同时用时，若 JS 加载失败，src 又不可用，就彻底无图可显

最易被忽略的一点：srcset 的“降级”只发生在浏览器选图阶段，它不处理加载失败。真要应对 404、CORS、防盗链拦截，得靠 onerror 或 fetch() + AbortController 主动干预 —— 但前提是 src 已经是个可靠起点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！