检测Javascript中的图像是否已损坏

我正在使用Javascript向HTML5画布添加图像：

img = new Image(); 
img.addEventListener('load', loadCallBack, false);
img.src = image_url;

function brokenImage() { ... }

img = new Image();
img.onerror = brokenImage;
img.src = "invalid_img_name.png";​

然后

loadCallBack

绘制图像

问题是，有时

图像\u url

指的是一个损坏或不存在的图像。当这种情况发生时，控制台中出现404错误，画布上的图像保持白色。相反，我希望能够将图像的

src

属性替换为另一个

image\u url

我尝试了以下方法，但无效：

img.addEventListener("error", function(){console.log("404");});

如何检测图像的404

---

注意：我仍在寻找解决方案，因为到目前为止，这两个帖子都不起作用。

在jQuery中对我有效

---

与Kostia的答案相同的代码：只是比较一下jQuery的丑陋和vanilla javascript的美丽：

img = new Image(); 
img.addEventListener('load', loadCallBack, false);
img.src = image_url;

function brokenImage() { ... }

img = new Image();
img.onerror = brokenImage;
img.src = "invalid_img_name.png";​

---

error

事件似乎有效（至少在Chrome中是这样）：我编辑了标题

Image（）

javascript类早在HTML5（澄清）之前就存在了。自从你提到canvas，我就把HTML5标记和你的问题放在一起了。但听起来像是这样的问题：我正在研究你的解决方案，谢谢。@LonelyWebCrawler你在使用jQuery吗？只要在尝试加载图像src之前附加.bind（）事件处理程序，它就可以工作。啊，我的顺序错了。奇怪的是，控制台仍然会发出404条消息，但是会调用error函数。谢谢很抱歉，我删除了您接受的答案，但这并不像我预期的那样有效。我会调查的。对我有用。警报不会弹出有效的图像url…请记住，直接分配给OneError处理程序将覆盖可能分配的任何其他错误事件处理程序。对于简单的情况可能不是问题，但大多数情况下最好使用img.addEventListener（“错误”）…-尽管如此，您必须使用addEventListener来处理所有跨浏览器问题。由于MrSpeaker的评论获得了如此多的赞成票，因此必须强调这是错误的：对OneError属性的关注在我们不拥有的对象中是有意义的（比如页面上所有javascript代码共享的HtmleElement）在这里，我们拥有

img

对象，因此我们可以自由地处理它，不管我们想做什么，它都可以。“大多数时候它更好…”-这不是一个争论，只是模糊的感觉。实际上，该评论是一个很好的社会潮流反模式的例子。