element.currentSrc возвращает URL во всех браузерах, кроме Firefox

Question

Я пытаюсь получить URL-адрес адаптивного изображения, загруженного через свойство HTML srcset.

До сих пор я справился с этим, запросив currentSrc изображения в соответствии с приведенным ниже кодом.

<img ID="image1" src="http://www.example.com/123.jpg" srcset="http://www.example.com/123.jpg 480w, http://www.example.com/123-large.jpg 640w,">

<script>
    var $currImg = $('#image1');
    var img = $currImg.get(0); //retrieve DOM element from $currImg
    console.log(img.currentSrc);
</script>

В большинстве браузеров регистрируется URL-адрес, например: "http://www.example.com/123-large.jpg".

Однако в Firefox он регистрирует URI данных по строкам:

"data: image / gif; base64, R0lGODlhAQABAIAAAP /// wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw == "

Кажется, что этот URI данных не работает для моей предполагаемой цели. Я пытаюсь установить src в качестве фонового изображения для другого элементаПросто кажется, что в Firefox загружается пустое изображение.

Почему Firefox преобразует URL в URI данных и есть ли способ заставить его вернуть нормальный URL?

Answer 1

Этот dataURL представляет собой изображение размером 1 на 1 пиксель, вероятно, это то, что браузер устанавливает, когда img загружает следующее изображение.Лично у меня его нет на моем FF63 на osX, и я подозреваю, что это ошибка, из-за которой вы можете получить к ней доступ из скриптов ... (или может быть какое-то расширение установило это?).

Но в любом случаечто вам нужно сделать, это дождаться события onload, чтобы currentSrc было эффективно разрешено.

console.log('before load', image1.currentSrc);
image1.onload = function() {
  console.log('after load', image1.currentSrc);
};

<img id="image1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/John_William_Waterhouse_A_Mermaid.jpg/619px-John_William_Waterhouse_A_Mermaid.jpg" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/John_William_Waterhouse_A_Mermaid.jpg/100px-John_William_Waterhouse_A_Mermaid.jpg 100w, https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/John_William_Waterhouse_A_Mermaid.jpg/330px-John_William_Waterhouse_A_Mermaid.jpg 330w">