Javascript：图像对象的 onerror 事件有哪些参数？如何获取与图像相关的错误的更多详细信息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28545619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: Which parameters are there for the onerror event with image objects? How to get additional details on an error related to an image?
提问by HumanInDisguise
I'm writing an application in JavaScript that should create a new image. Sometimes it fails. I was able to detect the times when it does by attaching an image.onerrorevent listener. Question is: How may I learn what error occured - what parameters does the error object for images bring? So far I only found out that
我正在用 JavaScript 编写一个应用程序，它应该创建一个新图像。有时它会失败。通过附加image.onerror事件侦听器，我能够检测到它发生的时间。问题是：我怎样才能知道发生了什么错误——图像的错误对象带来了什么参数？到目前为止我才发现
image.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
console.log('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber
+ ' Column: ' + column + ' StackTrace: ' + errorObj);
}
which I got from: javascript: how to display script errors in a popup alert?
我来自： javascript：如何在弹出式警报中显示脚本错误？
returns Error: [object Event] Script: undefined Line: undefined Column: undefined StackTrace: undefinedand in the error object I couldn't find anything related to message or error code.
返回Error: [object Event] Script: undefined Line: undefined Column: undefined StackTrace: undefined并且在错误对象中我找不到与消息或错误代码相关的任何内容。
回答by Peti29
AFAIK the image.onerror handler will receive a single Event parameter that doesn't contain any info on the cause of the error.
AFAIK image.onerror 处理程序将接收一个不包含任何关于错误原因的信息的事件参数。
回答by Martin_W
If you want to trap errors on a normal HTML imgelement (rather than dynamically creating one via the DOM), this seems to work well:
如果您想在普通 HTMLimg元素上捕获错误（而不是通过 DOM 动态创建一个），这似乎很有效：
<img src="http://yourdomain/site/badimage.png"
onerror="javascript:imageErrorHandler.call(this, event);"/>
Note that the .call(this, event)syntax is important so you have access to the thisand eventobjects in your error handler.
请注意，.call(this, event)语法很重要，因此您可以访问错误处理程序中的this和event对象。
Then you can define an image error handler like the following. (Make sure it is defined before the imgelement to avoid race conditions.) Assuming you have jQuery wired up:
然后你可以定义一个像下面这样的图像错误处理程序。（确保它在img元素之前定义以避免竞争条件。）假设您已经连接了 jQuery：
function imageErrorHandler(evt) {
var $e = $(this);
var src = $e.attr("src");
console.log("Image URL '" + src + "' is invalid.");
};
Tested this in Chrome. Have not tried other browsers.
在 Chrome 中对此进行了测试。其他浏览器没试过。
回答by Akshar
Image.onerror comes with a handler rather than error message, url, ...
Image.onerror 带有处理程序而不是错误消息、url、...
So, the first item in the list of arguments is an event.
因此，参数列表中的第一项是事件。
If you try your code with
如果您尝试使用您的代码
image.onerror(errorMsg, url, lineNumber, column, errorObj) {
console.log(errorMsg);
console.log(url)
}
you should get an event for the first log and undefined for the second.
您应该为第一个日志获取一个事件，为第二个日志获取未定义的事件。
I haven't been able to locate any legit reference as to what comes with the onerous handler for an Image object. But looks like it is mostly used to flag the error to the user rather than the developer.
对于 Image 对象的繁重处理程序附带的内容，我无法找到任何合法的参考。但看起来它主要用于向用户而不是开发人员标记错误。
回答by svub
The exact results might depend a bit on the browser you're using, but you'll get one parameter only, the event. I guess the source you found was out-dated. I hacked this little JSFiddle http://jsfiddle.net/Lsag7pt6/so you can try it yourself. Just comment in and out the correct and the "wrong" URL at the bottom of the script, open your JavaScript console (F12) and you'll see a print-out of the event with all it's attributes and values.
确切的结果可能在一定程度上取决于您使用的浏览器，但您只会获得一个参数，即事件。我猜你找到的来源已经过时了。我破解了这个小 JSFiddle http://jsfiddle.net/Lsag7pt6/所以你可以自己尝试一下。只需在脚本底部注释掉正确和“错误”的 URL，打开 JavaScript 控制台 (F12)，您就会看到事件的打印输出及其所有属性和值。
For reference, for the correct URL I get:
作为参考，对于正确的 URL，我得到：
Event {isTrusted: true, type: "load", target: img, currentTarget: img, eventPhase: 2…}
bubbles:false
cancelBubble:false
cancelable:false
composed:false
currentTarget:null
defaultPrevented:false
eventPhase:0
isTrusted:true
path:Array(6)
returnValue:true
srcElement:null
target:null
timeStamp:2109.725
type:"load"
Otherwise
否则
Event {isTrusted: true, type: "error", target: img, currentTarget: img, eventPhase: 2…}
bubbles:false
cancelBubble:false
cancelable:false
composed:false
currentTarget:null
defaultPrevented:false
eventPhase:0
isTrusted:true
path:Array(7)
returnValue:true
srcElement:img
target:img
timeStamp:1189.805
type:"error"
