Html 使用背景的 onerror 事件：url()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22287474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onerror event using background: url()
提问by Bono
Is there a way to show alternate image if source image is not found? I know to accomplish this is by doing something like below:
如果找不到源图像，有没有办法显示备用图像？我知道要做到这一点，请执行以下操作：
<img src="imagenotfound.gif" alt="Image not found" onError="this.src='imagefound.gif';" />
But how about if you are doing something like this, how can you catch if there is an error or if the image is not found?
但是如果你正在做这样的事情，如果有错误或者没有找到图像，你怎么能捕捉到呢？
<div style="background:url('myimage.gif')"></div>
回答by Oriol
In case myimage.gifisn't transparent, you could use multiple backgrounds:
如果myimage.gif不透明，您可以使用多个背景：
background: url('myimage.gif'), url('fallback.gif');
This way fallback.gifwill only be visible if myimage.gifisn't available.
这种方式fallback.gif只有在myimage.gif不可用时才可见。
Note that fallback.gifmay be downloaded even if myimage.gifis available.
请注意，fallback.gif即使myimage.gif可用，也可能会下载。
Alternatively, even though not widely supported, CSS Images 3 introduces the image()notation:
或者，即使没有得到广泛支持，CSS 图像 3 也引入了image()表示法：
background: image('myimage.gif', 'fallback.gif');
Multiple
<image-decl>scan be given separated by commas, in which case the function represents the first image that's not an invalid image.
Multiple
<image-decl>s可以用逗号分隔，在这种情况下，该函数表示第一个不是 无效图像的图像。
回答by PointedEars
With background images, there is no event; you have check yourself.
使用背景图像，没有事件；你有检查自己。
Make an (XML)HTTP request, and if you get a response with an error status codeor no response at all (after timeout), use another image resource. This approach is limited by the Same-Origin Policy.
发出 (XML)HTTP 请求，如果收到带有错误状态代码的响应或根本没有响应（超时后），请使用其他图像资源。这种方法受到同源策略的限制。
回答by Lars Moelleken
You can also use a dummy-image and use the onerror event from there ...
您还可以使用虚拟图像并从那里使用 onerror 事件...
$imageFoo = '
<div id="' . $uniqueId . '"
style="
background-image: url(//foo.lall/image.png);
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
"
></div>
<!-- this is a helper, only needed because "background-image" did not fire a "onerror" event -->
<img style="display: none;"
src="//foo.lall/image.png"
onerror="var fallbackImages = $(this).data(\'404-fallback\'); $(\'#' . $uniqueId . '\').css(\'background-image\', \'url(\' + fallbackImages + \')\');"
data-404-fallback="//foo.lall/image_fallback.png"
>
';
