如何获取CSS image-set中浏览器实际选用的URL（类似img的currentSrc）

目前没有像<img>元素的currentSrc那样直接的原生API，能获取到CSS image-set实际为背景图选中的URL。不过可以通过以下几种折中方案实现类似需求：

• 解析计算样式（局限性大）
  使用getComputedStyle获取元素的background-image值，但返回的是完整的image-set声明字符串（比如Chrome下是-webkit-image-set("low.jpg" 1x, "high.jpg" 2x)），并非浏览器最终选用的单个URL。你需要自己编写逻辑从字符串中提取可能的候选URL，但无法直接确定哪个是实际加载的。

• 模拟浏览器选择逻辑
  根据当前设备的像素比（window.devicePixelRatio）手动匹配。比如你定义的image-set是image-set('low.jpg' 1x, 'high.jpg' 2x)，就可以判断：如果devicePixelRatio >= 2则选用high.jpg，否则用low.jpg。但这种方法只能匹配简单的像素比规则，无法覆盖浏览器考虑的其他因素（如网络状况、设备性能），可能和实际加载的资源不一致。

• 借助img元素间接获取
  用JavaScript动态创建<img>元素，把image-set的资源配置放到img的srcset属性中，然后通过img.currentSrc拿到浏览器选中的URL，再将这个URL设置为目标元素的背景图。示例代码：

  function setBackgroundFromImageSet(targetSelector, imageSetSrc) {
    const img = new Image();
    img.srcset = imageSetSrc;
    img.addEventListener('load', () => {
      const selectedUrl = img.currentSrc;
      document.querySelector(targetSelector).style.backgroundImage = `url(${selectedUrl})`;
    });
  }
  // 调用示例：给class为bg-element的元素设置背景
  setBackgroundFromImageSet('.bg-element', "'low.jpg' 1x, 'high.jpg' 2x");
  

内容的提问来源于stack exchange，提问作者iGEL