Javascript:有图像对象的onerror事件有哪些参数？如何获得与图像相关的错误的其他详细信息？

Question

我正在用JavaScript创建一个应用程序来创建一个新的图像.有时会失败.通过附加image.onerror事件监听器,我能够检测到它的次数.问题是:我如何了解发生了什么错误 - 图像的错误对象带来了哪些参数？到目前为止,我才发现了这一点

image.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
  console.log('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber
  + ' Column: ' + column + ' StackTrace: ' +  errorObj);
}

我得到的: javascript:如何在弹出警报中显示脚本错误？

返回Error: [object Event] Script: undefined Line: undefined Column: undefined StackTrace: undefined并在错误对象中找不到任何与消息或错误代码相关的内容.

Answer 1

Image.onerror 带有一个处理程序，而不是错误消息、url、...

因此，参数列表中的第一项是事件。

如果你尝试你的代码

image.onerror(errorMsg, url, lineNumber, column, errorObj) {
  console.log(errorMsg);
  console.log(url)
}

您应该为第一个日志获取一个事件，而为第二个日志获取未定义的事件。

我无法找到任何关于 Image 对象的繁重处理程序附带的内容的合法参考。但看起来它主要用于向用户而不是开发人员标记错误。

Answer 2

AFAIK image.onerror处理程序将接收单个Event参数,该参数不包含有关错误原因的任何信息.

Answer 3

如果你想在普通的HTML img元素上捕获错误(而不是通过DOM动态创建一个),这似乎运作良好:

 <img src="http://yourdomain/site/badimage.png" 
      onerror="javascript:imageErrorHandler.call(this, event);"/>

请注意,.call(this, event)语法很重要,因此您可以访问错误处理程序中的this和event对象.

然后,您可以定义如下的图像错误处理程序.(确保在img元素之前定义它以避免竞争条件.)假设您已连接jQuery:

 function imageErrorHandler(evt) {
    var $e = $(this);
    var src = $e.attr("src");
    console.log("Image URL '" + src + "' is invalid.");
 };

在Chrome中测试过.没试过其他浏览器.