<picture>不支持运行时切换图源，因其资源选择仅在首次解析时执行；需通过JS修改<img>的src/srcset、预置多组<picture>显隐切换，或用URL.createObjectURL()动态加载。
不能直接用 <picture> “改图源”——它没有运行时切换能力，所有图源选择都在加载阶段完成，之后无法更改。 想在页面已加载后换图（比如点按钮切节日主题、拖动进度条换产品图），必须靠 JS 主动操作 DOM 或显隐控制。
为什么 <picture> 本身不支持运行时改图源
浏览器只在 <picture> 首次解析时读取 <source> 的 media 和 srcset，匹配一次就确定加载哪张图。之后即使你用 JS 改 <source> 的 srcset 或给外层加 class，浏览器不会重新触发资源选择逻辑——它已经“选完了”。
- 常见错觉：改了
media属性或 class，图片没变 → 实际是浏览器根本不响应 -
<img>的src可以随时改，但<source>的变更基本无效 - 想让新图生效，必须替换
<img>的src，或整个替换<picture>节点
真能“改图源”的三种实操方式
以下方案都绕过 <picture> 的声明式限制，用可控手段达成目的：
-
方案一：动态改
<img>的src和srcset—— 最轻量，适合少量节日图或状态图
保留一个<picture>结构，但 JS 直接更新内部<img>的src、srcset、alt：const pic = document.querySelector('picture');<br>const img = pic.querySelector('img');<br>img.src = 'logo-christmas.png';<br>img.srcset = 'logo-christmas@2x.png 2x';⚠️ 注意：所有节日图需保持相同宽高比，否则会 layout shift；loading="lazy"和alt必须同步更新 -
方案二：预置多组
<picture>，用 class 控制显隐 —— 兼容性最好，推荐用于节日主题
把每个主题的完整<picture>都写进 HTML，默认只显示一个，其余display: none：<div class="hero theme-default"><br> <picture><source ...><img src="default.jpg"></picture><br></div><br><div class="hero theme-christmas" style="display:none"><br> <picture><source ...><img src="xmas.jpg"></picture><br></div>
JS 切换时只需改外层容器 class：document.body.classList.add('theme-christmas')，CSS 控制显隐即可 -
方案三：用
URL.createObjectURL()加载临时图源 —— 适合用户上传或 canvas 生成图
当图源来自文件输入或动态绘制时，不能写死路径，要用 blob URL：const file = input.files[0];<br>const url = URL.createObjectURL(file);<br>img.src = url;<br>// 用完记得释放：URL.revokeObjectURL(url)
注意：这会绕过<source>，所以<picture>仅作语义容器，实际加载由<img>承担
容易被忽略的关键细节
很多人以为只要改了 srcset 就能换分辨率图，其实还卡在几个硬约束上：
立即学习“前端免费学习笔记（深入）”；
-
sizes属性只在首次加载时起作用，改它不会触发重选；后续换图必须手动算好目标宽度再设src - 如果用了
type="image/webp"，服务器返回的 MIME 类型必须严格匹配，否则 Chrome 会静默失败并 fallback 到下一条 - 旧版 Safari（16.4 之前）完全不执行
<source>匹配，只看<img>的src，所以任何方案都必须确保<img>始终有可用值 -
<picture>内部没有事件钩子（如onload不会冒泡到<picture>），监听加载完成得绑定在<img>上
