获取图片元素的当前图像源。

Question

一个HTMLImageElement具有currentSrc属性，因此我们可以获取img元素的当前源。在使用srcset定义多个可能源时非常有用。

似乎没有等效于HTMLPictureElement的东西。

那么我们是否可以通过Javascript找到picture元素的当前源的另一种方式？

- Colin Meinke

---

图片仅是提供图像元素不同来源的容器元素 - 因此我认为img元素的currentSrc在这里的工作方式也是相同的……？ - CBroe

@CBroe 这是有道理的，你知道有没有任何解释这个的文档吗？ - Colin Meinke

@CBroe，你说得完全正确。谢谢！ - Colin Meinke

Answer 1

您可以访问位于picture元素内的img元素的currentSrc属性，以获取应用的图像。

在下面的演示中（如果您使用全屏浏览器），currentSrc将是http://placehold.it/600x100图像。

window.onload = function() {
  const picture = document.getElementById('pictureEl');
  const currentSource = document.getElementById('currentSource');
  currentSource.innerText = picture.querySelector('img').currentSrc;
}

<picture id="pictureEl">
 <source srcset="http://placehold.it/600x100?text=Source" media="(min-width: 300px)">
 <img src="http://placehold.it/300x100?text=Img">
</picture>
<div id="currentSource"></div>

- Brett DeWoody

---

非常有帮助！ - Matt Bucci

Answer 2

使用此方法获取图像源。

function getCurrentSrc(element, cb){
    var getSrc;
    if(!window.HTMLPictureElement){
        if(window.respimage){
            respimage({elements: [element]});
        } else if(window.picturefill){
            picturefill({elements: [element]});
        }
        cb(element.src);
        return;
    }

    getSrc = function(){
        element.removeEventListener('load', getSrc);
        element.removeEventListener('error', getSrc);
        cb(element.currentSrc);
    };

    element.addEventListener('load', getSrc);
    element.addEventListener('error', getSrc);
    if(element.complete){
        getSrc();
    }
}

- Hiren Jungi

---

window.respimage和window.picturefill是从哪里来的？ - Colin Meinke

它们并不是浏览器原生方法，但有两个库使用了这些名称。 - GuybrushThreepwood