使用 jQuery/Javascript 处理“404 图像错误”错误答案

【问题标题】：Handling "404 image error" error with jQuery/Javascript使用 jQuery/Javascript 处理“404 图像错误”错误
【发布时间】：2012-02-07 22:04:58
【问题描述】：

加载 Youtube 托管视频的缩略图时，404 错误是实际图像。例如： http://i.ytimg.com/vi/eMFYg2oZ4qE/default.jpg http://i.ytimg.com/vi/0/default.jpg

由于错误显示为真实图像，

<img onerror="alert('error!')" src="http://i.ytimg.com/vi/0/default.jpg">

无法捕捉 404 错误...我该如何解决这个问题？

【问题讨论】：

我不确定onerror 应该做什么，因为它的 html 无效，但是这个关于使用 php 处理图像错误的问题可能会有所帮助：stackoverflow.com/questions/1025065/why-wont-this-code-work
onerror 有效。 theglenbot.com/html-image-tag-onerror-attribute
onerror 很好，但就像我在下面的评论中一样，从技术上讲，它不是 404，它只是来自 YouTube 服务器的默认响应。
其实我自己也在想这个……

标签： jquery error-handling youtube http-status-code-404 image

【解决方案1】：

我相信这些是在 YouTube 上的服务器端处理的，但是由于您将其标记为 jQuery，使用一小组图像，您可以通过简单的 AJAX 请求检查它们的存在，然后在失败时更改“src”属性到您的默认图像路径。

$.ajax("/path/to/image.img", failure: function() {
  $('#this-image').attr('src', 'default.jpg');
})

其中的虚拟选择器，您需要使其适合您的应用程序的逻辑

【讨论】：

虽然您确实说过虚拟选择器会将所有图像更改为 default.jpg。
我了解到，如果没有重量级的代码（通过某种代理，例如 php），跨域 ajax 是不可能的。我想让它尽可能轻。
好的，我想我现在更好地理解了你的问题。不幸的是，这一切都是在服务器端处理的，除非你开始使用 API（我建议任何一种方式），否则没有“简单、轻量级”的方式来做到这一点
供您参考：code.google.com/apis/youtube/getting_started.html#data_api
@KyleMacey 确实有它的轻量级版本；更新.htaccess 文件。

【解决方案2】：

将默认图像设置为某个本地图像。如果ajax请求通过，则使用服务器图像。

        var defaultImage = "/images/default_user.jpg";
        $.ajax({
            url: '/path/to/image.img',
            failure: function () {  
                 alert('Image not found in server');            
            },
            success: function () {
                defaultImage = "/path/to/image.img";
            }
        });

【讨论】：