javascript - 获取一个图片元素的当前图片源

Question

安HTMLImageElement有一个 currentSrc 属性，因此我们可以获得 img 元素的当前源。在使用 srcset 定义多个可能的源时很有用。

HTMLPictureElement 似乎没有等价物.

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

Answer 1

您可以访问picture 元素中img 元素的currentSrc 来获取应用的图像。

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

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>