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

Question

一个HTMLImageElement有一个currentSrc 属性所以我们可以得到一个img元素的当前源。在使用 srcset.

定义多个可能的来源时很有用

似乎没有 HTMLPictureElement 的等价物。

有没有另一种方法我们可以找到 Javascript 的 picture 元素的当前源？

Answer 1

使用它来获取图片来源。

function getCurrentSrc(element, cb){
    var getSrc;
    if(!window.HTMLPictureElement){
        if(window.respimage){
            respimage({elements: [element]});
        } else if(window.picturefill){
            picturefill({elements: [element]});
        }
        cb(element.src);
        return;
    }

    getSrc = function(){
        element.removeEventListener('load', getSrc);
        element.removeEventListener('error', getSrc);
        cb(element.currentSrc);
    };

    element.addEventListener('load', getSrc);
    element.addEventListener('error', getSrc);
    if(element.complete){
        getSrc();
    }
}

Answer 2

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

在下面的演示中（如果您在桌面上使用浏览器 full-width），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>

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

Get the current image source of a picture element

javascript

srcset

responsive-images