如何检测为什么图像无法加载？答案

【问题标题】：How can I detect WHY an image failed to load?如何检测为什么图像无法加载？
【发布时间】：2017-10-06 12:37:52
【问题描述】：

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

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

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

这很好用。但是，仅知道图像何时无法加载确实是不够的。我需要能够确定它发生的原因。该图像托管在我们的服务器上，因此不太可能出现 404，但并非不可能。我无权访问客户的设备，也无法重现他们描述的问题。

我试过四处寻找，但找不到我要找的东西......

我猜它可能是 404，一些 CSP 配置问题，可能是一些互联网连接中断，等等。我只是想知道它是什么，以便更好地理解它。

编辑：忘了说代码在 Cordova 应用程序中，所以没有要检查的日志。

【问题讨论】：

因此，您可以在图像失败后对图像进行 Ajax 调用并以这种方式获取状态码。
也许您应该检查您的服务器日志，了解为什么图像没有正确加载/交付？您当然可以在客户端执行 AJAX 请求并检查返回的 HTTP 状态码，但它只会告诉您错误的类型，而不是失败的原因。
src being set dynamically - 取决于设置方式，您很可能会收到 404，因为设置不正确。
忘了说代码在 Cordova 应用程序中，所以没有要检查的日志。至于 src 设置不正确，它已经完美运行了几个月，但是这个客户的设备只是不想加载他们的图像。

【解决方案1】：

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

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

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

但是，执行此操作的步骤在很大程度上取决于后端使用的内容。

【讨论】：

忘了说代码在 Cordova 应用程序中，所以没有要检查的日志。 ajax 调用是一个聪明的想法，我一定会实现。但是，这些可能不是唯一可能影响这一点的问题，对吗？
前端实际上被模拟为本机槽浏览器的事实并不意味着后端不记录请求。除非您使用来自您不拥有或无法控制的服务器的图像。还是您想说您将图像本地存储在设备上？因为这可能是您在哪里以及如何这样做的问题。
你说得对，我忘记了服务器访问/错误日志。我看不到任何可能意味着找不到资源或请求被拒绝的内容。我会接受这个作为答案，因为它提供了一个相当聪明的解决方案。
希望它能帮助您解决问题。当我调试这样的问题时，我的逻辑总是有一个明确的事件线，当你做某事时，这些事件会在内部发生。在哪里发生什么并一个一个地测试它，直到你缩小它。然后专注于那部分..