使用背景的onerror事件:url()

Question

如果找不到源图像,有没有办法显示替代图像？我知道要通过以下方式完成此任务:

<img src="imagenotfound.gif" alt="Image not found" onError="this.src='imagefound.gif';" />

但是,如果你正在做这样的事情怎么样,如果有错误或者如果没有找到图像你怎么能抓住？

<div style="background:url('myimage.gif')"></div>

Answer 1

如果myimage.gif不透明,您可以使用多个背景:

background: url('myimage.gif'), url('fallback.gif');

这种方式fallback.gif只有在myimage.gif不可用时才可见.

请注意,fallback.gif即使myimage.gif可用,也可以下载.

或者,即使没有得到广泛支持,CSS Images 3引入了image()符号:

background: image('myimage.gif', 'fallback.gif');

多个<image-decl>s可给出由逗号,在这种情况下,函数表示这不是一个第一图像分离无效图像.

是的,这以某种方式解决了我的问题!谢谢! (2认同)
CSS3 还没有真正实现 image() 。该参考仅适用于拟议的候选规范。 (2认同)
image() 实际上已推迟到 CSS 4 图像：https://www.w3.org/TR/css-images-4/#image-notation，目前完全不受支持：https://caniuse.com /#feat=mdn-css_types_image_image (2认同)

Answer 2

使用背景图像，没有事件；你有检查自己。

发出 (XML)HTTP 请求，如果收到带有错误状态代码的响应或根本没有响应（超时后），请使用其他图像资源。这种方法受到同源策略的限制。