srcset不生效主因是sizes未正确设置，它决定浏览器如何选择图片；sizes必须反映实际渲染宽度而非CSS宽度，且src必须指向真实资源以保障降级可用。
srcset不生效，八成是sizes没写对
浏览器不会凭空猜图占多宽，sizes不是可选项，而是决定srcset能否被正确选用的关键开关。不写sizes，Chrome 默认按100vw估算，Safari 可能直接跳过整组srcset——结果就是永远加载最大图，或干脆退化成src单图。
实操建议：
-
sizes值必须反映图片**实际渲染宽度**，不是容器CSS宽度。例如容器设了max-width: 600px，但没配媒体查询，sizes="(max-width: 768px) 100vw, 50vw"就可能失效 - 小屏全宽、桌面半宽的常见写法：
sizes="(max-width: 768px) 100vw, 50vw" - 全宽响应式但要防 iOS Safari 横屏 bug：
sizes="100vw, 100vh" - 所有
srcset项必须统一用w描述符（如photo-400w.jpg 400w），混用x和w会让部分浏览器静默忽略整组
src属性不能空，它是IE和断网时的最后活路
src不是“默认图”，而是所有不支持srcset的环境（IE11、旧安卓 WebView、断网、JS 加载失败）唯一能触发加载的字段。设成空字符串""、占位符"#"或错误路径，结果就是白屏——连alt都不会渲染。
实操建议：
-
src必须指向一个真实可访问的资源：1px GIF、LQIP 模糊图、或 CDN 托管的 800w 主图 - 首屏关键图（如 banner、商品主图）禁用懒加载，直接靠
src保障首帧可见 - SSR 渲染时务必保留
src，不要在 hydration 阶段清空它
DevTools里验证降级是否真起作用
光看页面显示正常没用。真正要确认的是“浏览器到底加载了哪个 URL”，以及“失败时有没有退到兜底图”。手动点开 Network 面板太慢，得用可复现的检查方式。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
- 打开 DevTools → Network → 勾选
Disable cache和Large rows - 用设备模拟器切 DPR：iPhone 12（3x）、Mac Retina（2x）、普通笔记本（1x），观察加载的图是否随 DPR 变化；不变说明
srcset或sizes失效 - 右键图片 →
Copy→Copy response，粘贴查看返回图的真实尺寸，比对是否匹配srcset中声明的w值
混用loading="lazy"和data-src会破坏降级链
原生懒加载和 JS 降级逻辑同时操作src，极易导致竞态：两次请求、src被覆盖、甚至加载中途变空。Safari 15.4 之前不支持loading="lazy"，又不报错，JS 若没兜底，图就卡在占位图不动。
实操建议：
- 别混合使用：要么纯原生（
loading="lazy"+srcset+sizes），要么纯 JS（移除loading="lazy"，由IntersectionObserver统一控制src赋值） - 若必须 SSR 输出
loading="lazy"，hydrate 后应立刻把src暂存进data-src并清空src，后续全交由 JS 控制——但这要求服务端和前端生命周期严格对齐 -
data-src必须静态写在 HTML 中，不能靠 JS 动态插入；断网时 JS 加载失败，data-src就不存在
真正的降级不是“有就用，没有就算”，而是让 DOM 在任何网络、设备、内核条件下都保持可运行状态。最容易被忽略的，是src字段的可靠性、sizes与 CSS 布局的实时对齐、以及懒加载与 JS 逻辑之间的时机冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
