srcset 不支持备选重试，加载失败时仅 fallback 到 src；真正格式降级需用 + ；弱网需 JS 主动超时干预，onerror 仅作最终兜底。

srcset 本身不提供“备选失败重试”，只靠浏览器择优加载后 fallback 到 src

很多人误以为 srcset 是一个“多 URL 备用列表”，其实它只是告诉浏览器“这里有多个尺寸/密度的图，你按需挑一个”。当所选资源加载失败（404、CORS、网络中断），浏览器**不会自动换下一个**，而是直接放弃，退回到 的 src 属性——这才是唯一确定的降级入口。

关键点在于：src 必须始终可用，且格式兼容性足够高（如 .jpg 或 .png）。如果 src 也失效，页面就白屏或显示破损图标。

• srcset 中所有项必须统一用 w 描述符（如 photo-400.jpg 400w）或统一用 x（如 photo@2x.jpg 2x），混用会导致整个属性被忽略
• 只写 srcset 不配 sizes，浏览器会按 100vw 估算宽度，大概率加载远超需要的大图，增加失败概率
• sizes 值必须反映图片**实际渲染宽度**，不是容器 CSS 宽度；常见可靠写法：sizes="(max-width: 768px) 100vw, 50vw"
• 旧浏览器（如 IE11）完全忽略 srcset，只加载 src，所以它的路径必须静态、可直访、无查询参数（如不能是 /img/logo.jpg?format=webp）

想让 WebP/AVIF 加载失败时切回 JPG，必须用 ，不能只靠 srcset

srcset 只管尺寸和像素密度，不管格式。如果你把 webp 地址塞进 srcset，不支持 WebP 的浏览器（如 Safari ≤13、老 Android WebView）会直接拒绝解码，但又不触发 error 事件——结果就是静默空白，连 src 都不加载。

真正能按 MIME 类型做格式降级的，只有 + 组合。它的匹配逻辑是顺序执行、一击命中：

• 浏览器从上到下检查每个 ，第一个 type 被支持 *且* srcset 可访问的，就加载它
• type 必须写完整 MIME 类型：image/webp，不能简写为 webp 或 .webp
• 所有 都跳过后，才加载底部 的 src；这个 标签不可省略，且其 src 必须指向真实可用的 JPG/PNG
• 不支持 onerror，错误仍会冒泡到 ，所以 的 onerror 仍要设防循环

onerror 是运行时兜底，不是 srcset 的延伸

给 绑 onerror，是在浏览器已经确认加载失败后，由 JS 主动接管替换 src。它和 srcset 没有协同关系，也不影响浏览器对 srcset 的选择逻辑。

DeepBI DHTML 页面生成器

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

下载

典型误用是：在 onerror 里又赋一个同样可能失败的 URL，导致无限循环。防循环最简方式是加标记：

• 内联写法：onerror="if (!this.dataset.fallback) { this.dataset.fallback = 'true'; this.src = '/img/placeholder.png'; }"
• fallback 图必须体积小、路径稳，推荐用 CDN 托管的 1px GIF 或内联 SVG（避免新 HTTP 请求）
• 不要在 onerror 回调里再 fetch 大图或调用复杂函数——主线程可能已卡住，应立即静默切换
• 注意 CORS 场景：onerror 会触发，但控制台只报跨域错误，没有 404，容易误判

弱网下仅靠 srcset 不够，需配合 JS 主动超时干预

srcset 和 都无法感知网络质量。用户在 2G 或高丢包环境下，高清图可能卡在加载中长达数秒，页面长期白屏——这不是失败，所以 onerror 不触发，src 也不会 fallback。

真正在弱网生效的降级，得靠 JS 主动探测：

• 用 fetch() + AbortController 对高清图发起带 timeout 的请求（如 1500ms）
• 超时即认为弱网，立刻切换 的 src 到低清版本，并清空原 src 防止缓存复用
• 该策略必须与 兜底并存：JS 降级负责“慢”， 负责“不支持”
• 慎用 loading="lazy"：在弱网下它会让首屏图延迟加载，叠加超时风险；非首屏图建议用 data-src 由 JS 控制时机

真正的降级链是线性的：浏览器先按 srcset/ 规则选源 → 选中的源加载失败则退到 src → src 再失败才走 onerror → 弱网还需 JS 提前拦截。任何一环缺失，用户看到的就是空白。

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