时间戳

首页 > 解决方案 > element.currentSrc 在除 Firefox 之外的所有浏览器中返回 URL

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

问题描述

我正在尝试获取通过 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，如下所示：

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

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

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

标签： javascriptjqueryimagefirefox

解决方案

这个 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">

推荐阅读