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