javascript - 在 Javascript 中检测图像是否损坏

Question

我正在使用 Javascript 将图像添加到 HTML5 Canvas :

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

然后 loadCallBack 绘制图像。

问题是有时 image_url 指的是损坏的或不存在的图像。发生这种情况时，我在控制台中收到 404 错误并且 Canvas 上的图像保持白色。相反，我希望能够用另一个 image_url 替换图像的 src 属性。

我尝试了以下方法，但没有用:

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

如何检测图片的 404？

注意:我仍在寻找解决方案，因为到目前为止发布的两个都没有奏效。

Answer 1

与 Kostia 的答案相同的代码:只是为了比较 jQuery 的丑陋和 vanilla javascript 的美丽:

function brokenImage() { ... }

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