Question

我正在使用Javascript：

将图像添加到HTML5画布

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

然后loadCallBack绘制图像。

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

我尝试了以下操作并且无效：

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

如何检测图像的404？

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

Answer 1

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

function brokenImage() { ... }

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

Answer 2

在jQuery中为我工作...... http://jsfiddle.net/5v2qG/

img = new Image(); 
$(img).bind('error', function () {
      alert('error called');                                                
});
img.src = "invalid_img_name.png";

检测图像是否在Javascript中被破坏

2 个答案: