javascript - element.currentSrc 在除 Firefox 之外的所有浏览器中返回 URL

Question

我正在尝试获取通过 srcset HTML 属性加载的响应式图像的 URL。

到目前为止，我已经通过按照下面的代码行请求图像的 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:

“数据:图像/gif；base64，R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==”

此数据 URI 似乎无法达到我的预期目的。我正在尝试将 src 设置为另一个元素的背景图像。它似乎只是在 Firefox 中加载一个空图像。

为什么 Firefox 将 URL 转换为数据 URI？有什么办法强制它返回正常的 URL？

Answer 1

这个 dataURL 是一个 1px x 1px 的图像，可能是浏览器在 img 加载下一张图像时设置的。我个人在 osX 上的 FF63 上没有它，我怀疑这是一个错误，您可以从脚本访问它......(或者某些扩展程序可以设置它吗？)。

但无论如何，您需要做的就是等待 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">