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

Question

一个HTMLImageElement有一个currentSrc属性,因此,我们可以得到一个的电流源img元素.在定义多个可能的源时很有用srcset.

似乎没有HTMLPictureElement的等价物.

有没有其他方法可以picture使用Javascript 找到元素的当前来源？

Answer 1

您可以访问currentSrc的的img一个内元素picture元素得到施加图像.

在下面的演示中(如果您使用浏览器的全宽桌面),currentSrc将是http://placehold.it/600x100图像.

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>