picture标签通过type属性按顺序匹配浏览器支持的MIME类型来切换图片格式,优先加载首个支持的格式(如avif→webp→jpeg),必须提供img的src作为兜底,且type值须为标准MIME类型。

格式切换必须靠type,不是media
每个
例如:
<picture><source srcset="photo.avif" type="image/avif"><source srcset="photo.webp" type="image/webp"> @@##@@ </source></source></picture>
Chrome 120+会加载avif;Safari 16.4之前不支持avif和webp,直接跳过前两个
里的jpg。
type必须写对,且顺序不能颠倒
- type值必须是标准MIME类型,不能写成.webp或avif
- 优先放最新格式(avif → webp → jpeg),因为浏览器不会“降级尝试”,只取首个支持项
- 错误示例:把jpg放在最前 → 所有浏览器都用jpg,avif和webp永远不生效
srcset可省略路径后缀,但推荐保持一致
srcset里只需提供路径,无需带格式说明:
✅ 推荐:srcset="photo.avif"
✅ 也可:srcset="photo.jpg"(只要type声明正确)
❌ 避免混用:不要在同一个srcset里写"photo.avif, photo.webp"——srcset不处理格式判断,那是type的事
是强制兜底,src不可少
即使所有仍必须含src属性:
- 老浏览器(如IE)完全忽略
和type,只读 - 所有浏览器在无匹配
时都会 fallback 到 - 漏掉src会导致图片区域空白
验证是否生效,看实际加载的URL
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
- 在Elements面板中右键图片 → “Open in new tab”,看地址栏是否为.avif或.webp
- Network面板过滤图片请求,确认Content-Type是否为image/avif等
- 不要依赖预加载请求,它可能只是占位或preload,真正渲染的是最终选中的那个
基本上就这些。










