必须禁用缓存并验证真实加载源：Chrome DevTools Network面板勾选Disable cache后刷新，筛选Img查看实际请求URL及尺寸，确保srcset中w值与原图真实宽度一致、sizes媒体查询匹配CSS渲染宽度。
用 DevTools Network 面板确认实际加载哪张图
浏览器不会按你写的 srcset 和 sizes “应该”选哪张，而是按当前渲染宽度 + DPR + 缓存状态“实际”选哪张。不关缓存就测不准——CDN 或本地磁盘缓存可能返回旧资源，让你误判逻辑生效。
- Chrome DevTools → Network 面板 → 勾选
Disable cache - 刷新页面，筛选
Img类型请求 - 右键目标图片 →
Copy→Copy response，粘贴到编辑器里看真实尺寸（或直接看响应头Content-Length粗略判断） - 缩放浏览器窗口或切设备模拟器（如 iPad Pro、Galaxy S22），观察 Network 列表中请求 URL 是否切换
检查 srcset 中的 w 描述符是否与原图真实宽度一致
srcset 里的 320w 不是“大概 320px 宽”，而是要求这张图文件本身的像素宽度**必须等于 320**。用 file logo.jpg 或在线 EXIF 查看器验证，如果输出是 data 或 no dimensions，说明元数据丢失，浏览器无法正确匹配。
- 错误写法：
srcset="thumb.jpg 320w"，但thumb.jpg实际是 640×360 → 浏览器计算目标尺寸时错位，可能跳过它去加载 768w - 修复命令（Linux/macOS）：
exiftool -ImageWidth=320 -ImageHeight=180 thumb.jpg - 生成时强制尺寸：
convert -resize 320x180\! input.png thumb.jpg（末尾\!表示忽略原始比例强行拉伸并写死尺寸）
sizes 媒体查询必须匹配 CSS 实际渲染宽度
sizes="(max-width: 768px) 100vw, 50vw" 这句只在容器真被渲染为 100% 视口宽时才生效。如果父容器有 max-width: 600px 或 padding: 20px，浏览器算出的“目标宽度”就会比预期小，导致永远选不到小图。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在 Elements 面板选中
img→ 右侧 Computed → 找width值，确认是否和sizes里对应条件一致 - 常见陷阱：写了
sizes="(min-width: 1024px) 50vw"，但页面没设，移动端强制以桌面视口渲染，1024px条件永不满足 - 更稳妥写法：
sizes="(max-width: 600px) calc(100vw - 40px), (max-width: 1024px) 50vw, 33vw"（把 padding 拆进 calc）
IE/旧 Android WebView 下 fallback 是否真正兜底
所有现代降级逻辑（srcset、sizes、loading="lazy"）在 IE 或 Android 4.4 WebView 中都被忽略，浏览器只会加载 src。如果这个 src 是空、相对路径错误、或指向一个动态接口（如 /api/image?uid=123），结果就是白屏或叉号。
- 测试方法：用 BrowserStack 或真机开启 IE11 / Android 4.4，直接访问页面，看是否显示图片而非 alt 文本
-
src必须是静态、同域、高可用地址，例如/img/fallback-800w.jpg，不能含查询参数、不能是./logo.svg（部署后易 404） - 终极保险：
src指向一个内联 base64 的 1px GIF：src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="，确保 100% 可加载
实际验证中最容易被跳过的环节，是忘记关缓存就下结论，以及把 sizes 当成“容器 CSS 宽度”来写，而它真正依赖的是浏览器渲染树里那个 img 元素最终计算出的宽度值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
