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：

“ data：image / 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">

element.currentSrc在除Firefox

1 个答案: