应通过 document.queryselector('picture img').currentsrc 获取当前生效图片地址，需确保图片已加载（检查 complete 属性或监听 load 事件），响应式切换后需结合 matchmedia 或防抖 resize 重新读取。
picture标签里怎么拿到当前生效的图片地址
直接读 picture 元素本身没有 src 属性，它只是个容器；真正加载的是它内部的 img 标签。所以关键不是操作 picture，而是先定位到它包裹的那个 img，再读它的 currentSrc。
注意：不能读 src，因为 src 可能是占位值（比如空字符串或默认小图），而 currentSrc 是浏览器根据 srcset、sizes 和当前视口实际选中的最终 URL。
常见错误现象：document.querySelector('picture img').src 返回空或 base64 占位符，但页面明明显示了高清图 —— 这就是没用 currentSrc 的典型表现。
JS获取currentSrc前必须确保img已加载完成
currentSrc 在图片尚未触发加载逻辑时可能为空或不准确，尤其在 DOM 刚挂载、但资源还没开始下载时。不能一查就完事，得等时机。
推荐做法：
- 监听
img的load事件后再读currentSrc（最稳妥） - 如果图片已存在于缓存或已渲染完成，可立即读取，但需加防御性判断：
if (img.complete && img.currentSrc) {...} - 避免在
DOMContentLoaded回调里直接读 —— 此时img很可能还没解析完srcset规则
示例：
const img = document.querySelector('picture img');
if (img.complete && img.currentSrc) {
console.log(img.currentSrc); // ✅ 安全
} else {
img.addEventListener('load', () => {
console.log(img.currentSrc); // ✅ 真正加载完成后
});
}
响应式切换后如何重新获取最新图片路径
用户缩放窗口、旋转设备、切到新屏幕时，浏览器可能重新评估 srcset 并切换 img.currentSrc，但这个过程不会触发 load 事件（因为不是新请求，而是复用缓存资源）。所以仅靠 load 会漏掉后续变化。
可行方案：
- 监听
window.matchMedia对应的媒体查询（如(min-width: 768px)），并在回调中重新检查currentSrc - 对频繁变化场景（如拖拽调整窗口），用
resize+ 防抖，再读currentSrc（注意：只在确认图片确实可能切换时才查，避免无谓轮询） - 不要监听
img的resize事件 ——img元素本身不触发该事件
性能提示：反复读 currentSrc 开销极小，但别在每帧 requestAnimationFrame 里读。
兼容性与 SSR 场景下的 fallback 处理
在服务端渲染（SSR）或 JS 暂未执行时，currentSrc 不可用；老版本 Safari（currentSrc 支持不稳定；某些懒加载库会延迟设置 src，导致 currentSrc 延迟就绪。
建议 fallback 顺序：
- 优先用
img.currentSrc - 降级读
img.src（仅当确定没用srcset或明确知道它已被赋值） - 再降级查最近的
source[srcset]中匹配当前window.devicePixelRatio和matchMedia的项（复杂，一般不需要）
容易被忽略的一点：如果 picture 内有多个 source，但都没命中，浏览器会回退到 img[src] —— 所以确保 img 标签始终有兜底 src 属性，否则 currentSrc 可能为空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
