用标签实现深色模式配图自动切换，需暗色图置于浅色图之前并写全media值，配合必需的`fallback；路径、srcset和src须合法有效；旧环境降级至浅色图，可加no-preference兜底；响应式增强时prefers-color-scheme`与尺寸条件正交使用。

用 `` 标签实现文章配图在深色模式下的自动切换，核心是让浏览器根据系统主题偏好，原生选择对应图像，不依赖 JavaScript，加载快、语义清、无障碍友好。

基础结构：按顺序声明暗色优先的 source

深色图的 `` 必须放在浅色图之前，且 `media` 值要写完整。浏览器从上到下匹配，第一个满足条件的生效：

• 暗色图放前面：<source media="(prefers-color-scheme: dark)" srcset="figure-dark.webp"></source>
• 浅色图放后面：<source media="(prefers-color-scheme: light)" srcset="figure-light.webp"></source>
• 必需的 fallback：<img src="figure-light.webp" alt="示意图描述"> —— 不参与媒体查询，但决定可访问性和降级表现

路径与格式必须严格正确

静默失效最常见于细节出错，不是功能本身有问题：

html-ppt-to-pdf

将使用 `

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

下载

• 检查所有 `srcset` 中的图片路径是否真实存在，尤其注意相对路径在子页面中是否仍有效
• 每个 `` 都要有合法 `srcset`（不能为空或只写空格），否则该 `` 会被整个跳过
• 不要省略 `` 的 `src`；它不能是占位符或空字符串，应指向一个可用的默认图（通常为浅色版）

兼容旧环境的稳妥写法

部分旧版 Safari 或 WebView 不支持 `prefers-color-scheme`，此时会直接忽略所有 ``，只渲染 ``。因此：

• 把最通用、最安全的图像（通常是浅色版）设为 `` 的值
• 可选添加未指定主题的兜底：<source media="(prefers-color-scheme: no-preference)" srcset="figure-light.webp"></source>，行为通常与 `light` 一致
• 无需引入 polyfill 或 JS 补救——这是设计上的优雅降级

配合响应式增强（可选）

如果配图还需适配不同屏幕尺寸或像素密度，可在每个 `` 内单独使用 `srcset` + `sizes`，与明暗逻辑正交：

• 例如：<source media="(prefers-color-scheme: dark) and (min-width: 768px)" srcset="fig-dark-800w.webp 800w, fig-dark-1200w.webp 1200w" sizes="90vw"></source>
• 注意：`media` 里不能混用 `prefers-color-scheme` 和 `min-width` 以外的复杂条件，避免部分浏览器解析失败
• `` 的 `srcset` 和 `sizes` 依然有效，用于兜底场景下的 DPR 适配

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！