Get the current image source of a picture element

Colin Meinke picture Colin Meinke · Jan 20, 2017 · Viewed 7.9k times · Source

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

Brett DeWoody picture Brett DeWoody · Jan 20, 2017

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>