Получить текущий источник изображения элемента изображения

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>

Answer 2

Используйте это, чтобы получить источник изображения.

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(); 
    } 
}