我正在从服务器加载图像，当图像不存在时，服务器将返回一个404响应以及一个200x200的PNG回退图像，上面写着"照片不可用"。
我想在客户端检测这种情况发生的时间。 我尝试使用onerror属性：
<img src="http://example.com/photo.jpg" onerror="console.log(this)" />
当服务器返回的404响应没有任何图像时，此代码才有效。由于我的404响应中有图像，因此onerror事件永远不会触发。
除了使用JavaScript预加载图像之外，是否有解决这个问题的方法？
<img src="tttttttt.png" onerror="this.onerror=null;this.src='https://www.google.com/images/srpr/logo11w.png'" />
（在Brad指出我忽略的明显细节后进行了更新。）
我偶然发现了this，它似乎可以正确地触发onerror()：
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.errimg = function(options) {
return this.each(function() {
if (this.tagName.toLowerCase() != 'img')
return;
// store current img for error reference
var $_orig = $(this);
// create "production" image
var $newImg = $_orig.clone()
.attr('src', $_orig.data('src') || '')
.one('error', function() {
$(this).parent()
.empty()
.append($_orig);
});
// replace current img
$_orig.parent().empty().append($newImg);
});
};
})(jQuery);
$(function() {
$('.js_img img').errimg();
});
</script>
</head>
<body class="js_img">
<img id="testimgbad" src="http://img4.homefinder.com/i/00000000-0000-0000-0000-000000000000/w200-h-q" onerror="console.log('errored out');" />
</body>
</html>
onerror，我同意这是一个错误，但在几个浏览器中非常一致。我在相关问题上添加赏金的原因是我认为解决方法可能是捕获所有错误（就像开发者工具一样），然后搜索DOM以删除具有匹配src属性的有问题的图像元素。其他人已经发布了解决方案，我只是还没有测试过。 - Brad<img src="https://img.youtube.com/vi/{id}/maxresdefault.jpg" onload="if (this.naturalWidth === 120) {this.src = this.currentSrc.replace('maxresdefault', 'mqdefault');}">
我可能有点晚，但我也遇到了这种情况，我想出的解决方案是在加载时使用ajax，然后检查ajax是否失败。为了简洁起见，我在这里使用了jQuery。希望能帮助到某些人。
$('#image').on('load',function(e){
var self = this;
$.get($(this).attr('src'))
.then(function(){
// do nothing
},function(){
console.log('do something if it has error');
});
});
onerror处理程序无效，您可以对 URL 进行 head 请求并检查是否返回 404。 - adeneo