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

时间:2017-01-14 01:24:38

标签: javascript html css image retina

我正试图在我的网站上实现视网膜(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变体,否则我们最终会在整个地方出现损坏的图像。

1 个答案:

答案 0 :(得分:0)

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