Get the current image source of a picture element

问题

An HTMLImageElement has a currentSrc property so we can get the current source of an img element. Useful when defining multiple possible sources with srcset.

There seems to be no equivalent for an HTMLPictureElement.

Is there another way we can find the current source of a picture element with Javascript?

回答1:

You can access the currentSrc of the img element within a picture element to get the applied image.

In the demo below (if you're on a desktop with your browser full-width) the currentSrc will be the http://placehold.it/600x100 image.

window.onload = function() {
  const picture = document.getElementById('pictureEl');
  const currentSource = document.getElementById('currentSource');
  currentSource.innerText = picture.getElementsByTagName('img')[0].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>

回答2:

Use this to get source of image.

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();
    }
}

来源：https://stackoverflow.com/questions/41762621/get-the-current-image-source-of-a-picture-element

标签

javascript

responsive-images

srcset