picture标签需按顺序写source并设media或type属性，浏览器在加载或resize时匹配最适资源，img作为兜底；动态切换应优先用JS改img.src而非重写source。

picture标签怎么写才能让浏览器自动选图

picture 本身不“动态”切换，它靠浏览器根据 source 的 media 或 type 属性，在页面加载时一次性匹配最合适的资源。所谓“动态替换”，其实是用 JS 手动改 source 或 img 的 src，但优先走原生逻辑更稳。

• 必须把 img 放在 picture 最后，作为兜底（没有匹配到任何 source 时才用它）
• 每个 source 要带 srcset（可含多个分辨率）和 media（如 (max-width: 768px)）或 type（如 image/webp）
• media 查询在 JS 中无法直接监听变化，得靠 matchMedia() 主动监听

<picture>
  <source media="(max-width: 480px)" srcset="cat-small.webp" type="image/webp">
  <source media="(max-width: 480px)" srcset="cat-small.jpg">
  <source media="(min-width: 481px)" srcset="cat-large.webp" type="image/webp">
  <source media="(min-width: 481px)" srcset="cat-large.jpg">
  <img src="cat-fallback.jpg" alt="Cat">
</picture>

为什么改了srcset浏览器却不换图

浏览器只在 picture 首次渲染或窗口 resize 后重新评估 source 匹配，不会因你 JS 修改了某个 source.srcset 就立刻重载——它只认初始 DOM 状态或 resize 触发的重计算。

• 直接改 source.srcset 不触发重选，必须强制让浏览器“重新解析”整个 picture
• 可行做法：删掉旧 source、插入新 source，再调用 img.src = img.src（触发重载）
• 更稳妥的是只换 img.src，放弃 source 切换，尤其在需要运行时响应用户操作时

想根据用户操作实时换图，该用JS还是纯HTML

纯 HTML picture 适合响应式场景（设备宽度、DPR、格式支持），不适合运行时事件驱动（比如点击按钮切主题图、夜间模式切暗色图）。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 如果是主题/模式切换，建议用 JS 控制 img.src + class 切换，配合 CSS background-image 或 data-* 存多套路径
• 如果坚持用 picture，每次切换需：
  • 清空所有 source 节点
  • 按当前条件重建 source（注意 media 和 type 顺序不能错）
  • 确保 img 的 src 指向当前应显示的 fallback 地址
• 多数情况下，img[src] + srcset 已足够（picture 并非必需）

WebP支持检测失败导致备用图不加载

type="image/webp" 是声明式提示，浏览器不支持 WebP 会跳过该 source，但不会报错；如果所有 source 都被跳过，就回退到 img。问题常出在：

立即学习“前端免费学习笔记（深入）”；

• source 顺序写反：把宽屏 source 放前面，窄屏放后面，而 media 条件又没覆盖全，导致匹配不到
• WebP 文件实际损坏或 MIME 类型返回错误（Nginx/Apache 需配置 image/webp）
• 开发时本地文件协议（file://）下部分浏览器禁用 type 匹配，务必用本地 server 测试

真正难处理的是“运行时格式探测”——比如先 fetch 一个 WebP URL，404 了再切 JPG。这种不属于 picture 职责范围，得用 JS 做探测+降级。