Javascript 响应性<；img>；标签检索错误的src

我一直在尝试让某个图像标记响应，根据上下文检索最合适的

src

标签如下所示：

<img
    id="picimg"

    src="image.jpg"

    srcset="image-300x281.jpg 300w,
            image-1024x961.jpg 1024w,
            image.jpg 1664w"

    sizes="(max-width: 499px) 92vw,
            (min-width: 500px) 86vw,
            (min-width: 960px) 96vw, 96vw"
>

然而，

src

似乎永远不会改变（它似乎总是

image.jpg

），不管浏览器及其宽度如何

我怀疑，通过重复与

srcset

属性中最后一项相同的默认

src

，它可能会影响结果。或者，决定因素可能是默认大小（大小中的最后一项）

---

非常感谢您的帮助。

如果您从一个宽大的窗口开始，这样最大的图像就是最合适的图像，那么Chrome/Opera将不会在缩小窗口时下载较小的图像。请参见

语法似乎工作正常（在实际的移动浏览器上测试成功）

我只是不知道为什么检查

src

的脚本不能正常工作

---

谢谢大家的帮助。

我总是不知道如何测试它。我发现Chrome开发工具在将鼠标悬停在某个元素上时会误报显示的图像，但右键单击并转到“在新选项卡中打开图像”是可行的。或者，在开发过程中尝试使用水印标记响应图像，以确保其正常工作。首先，请使用png而不是jpg！这个密码笔有用吗@Grahampsheath，还有，水印建议非常有用，谢谢。我理解，谢谢。然而，我试图通过在较小的屏幕上加载页面进行检查，但在Chrome或FF中不起作用。然而，我必须说，它在移动Chrome和Firefox上起作用：）

(function() {
  var currentSrc, oldSrc, imgEl;
  var showPicSrc = function() {
    oldSrc     = currentSrc;
    imgEl      = document.getElementById('picimg');
    currentSrc = imgEl.currentSrc || imgEl.src;

    if (typeof oldSrc === 'undefined' || oldSrc !== currentSrc) {
      document.getElementById('logger').innerHTML = currentSrc;
    }
  };

  // You may wish to debounce resize if you have performance concerns
  window.addEventListener('resize', showPicSrc);
  window.addEventListener('load', showPicSrc);
})(window);