画像要素の現在の画像ソースを取得

Question

HTMLImageElementはというプロパティを持ち、img要素の現在のソースを取得できます。 srcsetで複数のソースを定義する場合に便利です。

HTMLPictureElementと同等のものはないようです。

picture要素の現在のソースをJavascriptで見つける別の方法はありますか？

Answer 1

あなたは適用された画像を取得するためにpicture要素内img要素のcurrentSrcにアクセスすることができます。

下記のデモ（ブラウザが全画面のデスクトップの場合）の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(); 
    } 
}