Get the current image source of a picture element

Question

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?

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