我正在尝试在我的网站上实现视网膜 (2x) 图像。我们的页面是从模板构建的，我们只使用标准的内联图像:
<img src="path/to/image.png" />
我想我可以很聪明，用
srcset 更新它:<img src="path/to/image.png" srcset="path/to/image@2x.png 2x" />
但是，我们还没有许多这些图像的 2x 变体。
所以我测试了
srcset将不存在的图像指定为 2x 资源的属性，认为由于它不可用，浏览器将仅显示 src 中指定的标准图像.相反，它尝试加载丢失的 2x 资源并在页面上显示损坏的图像。如果 2x 图像不存在，有没有办法让浏览器显示 1x 图像作为后备？否则，在每个图像都有 2x 变体之前，我无法更新模板，否则我们最终会得到到处都是损坏的图像。
最佳答案
答案是不。 srcset 中的所有图像都必须存在。否则，您最终会得到到处都是损坏的图像。
这么说，如果你使用 onerror ，你可以有一个后备图像:
<img src="path/to/image.png" srcset="path/to/image@2x.png 2x" onerror="this.onerror=null;this.src='path/to/image.png'" />
关于javascript - 有没有办法为丢失的 srcset 图像提供后备？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41645832/