怎么在HTML中用picture标签动态替换图片源-html教程-PHP中文网

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

怎么在html中用picture标签动态替换图片源

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">
  @@##@@
</source></source></source></source></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-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

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