如何检测图像加载失败的原因？

Question

我在页面上有一个img元素，其src在页面加载时动态设置（针对不同情况的不同图像以及图像由客户端提供）。

我可以检测到图像无法加载时，我通过报告来处理。当它无法加载时，我也设置了一个占位符图像。

<img alt="Image not found" onError="failedToLoadResource" id="something" class="class1 class2">

这个伟大的工程。但是，只知道图像加载失败的时间还不够。我需要能够确定它为什么发生。该图像托管在我们的服务器上，因此404不太可能，但并非不可能。我无法访问客户端的设备，也无法按照他们描述的方式重现问题。

我试着环顾四周，但我无法找到我要找的......

我猜它可能是404，一些CSP配置问题，也许有些互联网连接打嗝，不管。我只是想知道它是什么，所以我可以更好地理解它。

编辑：忘了说代码是在科尔多瓦的应用程序，所以没有日志来检查。

Answer 1

从客户端，你可以尝试通过ajax调用，然后解析响应来访问图像。使用jQuery轻松完成。

var call = $.ajax("image.img") 
    .fail(function(call, textStatus) { 
    alert("Request failed: " + textStatus); 
    }); 

从服务器端，您可以检查服务器日志，寻找正确的请求，看看发生了什么。如果请求从未到达服务器，则可能是网络/路由/防火墙问题。

但是，执行此操作的步骤高度依赖于后端中使用的内容。