有没有办法为丢失的srcset图像提供后备？

Question

我正试图在我的网站上实现视网膜（2x）图像。我们的页面是使用模板构建的，我们只使用标准的内嵌图像：

<img src="path/to/image.png" />

我认为我可以聪明并使用srcset更新此内容：

<img src="path/to/image.png" srcset="path/to/image@2x.png 2x" />

但是，我们还没有其中许多图像的2倍变体。

所以我使用指定为2x资源的不存在的图像测试了srcset属性，认为由于它不可用，浏览器只会显示{{1}中指定的标准图像}。相反，它试图加载缺少的2x资源并在页面上显示损坏的图像。

如果2x图像不存在，有没有办法让浏览器将1x图像显示为后备？否则，我无法更新模板，直到每个单个图像都有2x变体，否则我们最终会在整个地方出现损坏的图像。

Answer 1

答案是否定的。 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'" />