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?
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.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>