<img> onerror 与 404 图像响应答案

【问题标题】：<img> onerror with 404 image response<img> onerror 与 404 图像响应
【发布时间】：2015-04-29 09:02:04
【问题描述】：

我正在从服务器加载图像，当存在 404 时返回图像。也就是说，如果我正在加载的图像不存在，服务器将返回 404 响应，其中包含 200x200 PNG 后备图像，上面写着“照片不可用”就可以了。

我想检测客户端发生这种情况的时间。我试过onerror属性：

<img src="http://example.com/photo.jpg" onerror="console.log(this)" />

此代码仅在来自服务器的 404 响应根本没有图像时才有效。由于我的 404 响应确实如此，因此永远不会触发 onerror 事件。

有没有办法解决这个问题，除了用 JavaScript 预加载图像吗？

【问题讨论】：

如果 onerror 处理程序不起作用，您可以对 url 进行头部请求并检查 404
在 JavaScript 中 Ping URL 并检查响应代码？
是的，如果我找不到更好的方法，我会使用这些选项。我更喜欢不同的解决方案，这样我就可以将图像保留在非 JavaScript 用户的标记中。

标签： javascript image

【解决方案1】：

当在服务器上找不到所需的图像时，一种解决方案是不返回图像。相反，稍后会使用 onerror 事件显示错误图像。

<img src="tttttttt.png" onerror="this.onerror=null;this.src='https://www.google.com/images/srpr/logo11w.png'" />

JSFiddle

参考： jQuery/JavaScript to replace broken images

【讨论】：

这不是我的选择，因为除了我的应用程序之外，该服务还用于其他地方，并且在其他情况下需要返回 404 图像。

【解决方案2】：

（更新，正如@Brad 指出我不知道的明显细节。）

我偶然发现了this，它似乎正确地触发了 onerror()：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script type="text/javascript">
        (function($) {
            $.fn.errimg = function(options) {
                return this.each(function() {
                    if (this.tagName.toLowerCase() != 'img')
                        return;         

                    // store current img for error reference
                    var $_orig = $(this);
                    // create "production" image
                    var $newImg = $_orig.clone()
                        .attr('src', $_orig.data('src') || '')
                        .one('error', function() {
                            $(this).parent()
                                .empty()
                                .append($_orig);
                        });
                    // replace current img
                    $_orig.parent().empty().append($newImg);
                });
            };
        })(jQuery);         

        $(function() {
            $('.js_img img').errimg();
        });
        </script>
    </head> 

    <body class="js_img">
        <img id="testimgbad" src="http://img4.homefinder.com/i/00000000-0000-0000-0000-000000000000/w200-h-q" onerror="console.log('errored out');" />
    </body> 

</html>

【讨论】：

这根本不是真的。您绝对可以使用 404 发回数据，这很常见。在我的情况下，404 是正确的响应状态码，返回的图像是按设计的。我只需要在特定应用程序的客户端检测它。
你能给我一个链接吗？我并不是说你错了，我只是从来没有，或者更准确地说，目睹浏览器故意这样做。
img4.homefinder.com/i/00000000-0000-0000-0000-000000000000/… 从图片托管网站、论坛和不允许交叉链接的网站中删除的图片也很常见（尽管对于交叉链接，他们通常会在图片中发送 403）。跨度>
@Brad 感谢您花时间/耐心指出这一点，直到现在我才看到。响应已更新。我真的很好奇这首先是如何/为什么会发生的，但不可否认，我的大部分时间都花在了非常奇怪的低级工作上，通常涉及编辑服务器软件本身，而不是所提供的内容/页面/文件。
将其视为任何其他错误文档。人们一直使用自定义 404 页面。这没有什么不同，除了内容类型是专门的。您会在 JSON API 服务器上看到类似的情况，其中发送了一个不错的 JSON 错误响应，而不是 HTML 404 页面。

【解决方案3】：

U 可能会使用 onload 函数而不是 onerror，并检查加载的图像（如果您在开始时知道有关该图像的信息）。

您不妨弄清楚您希望这种情况发生多少次，因为您正在为每个可能不必要的图像注册某种侦听器。

【讨论】：

【解决方案4】：

我可能会迟到，但我也有这种情况，我想出的解决方案是加载时ajax，如果失败则检查ajax。为了简洁起见，我在这里使用了 jQuery。希望它可以帮助某人。

$('#image').on('load',function(e){
   var self = this;
   $.get($(this).attr('src'))
    .then(function(){
     // do nothing
    },function(){
       console.log('do something if it has error');
    });
});

【讨论】：

【解决方案5】：

如果您确定现有图像和 404 图像之间的尺寸不同，您可以使用该信息来做一些其他的技巧。

例如，您想要显示可用的最大 16:9 Youtube 缩略图。如果获取的缩略图不存在，Youtube 会返回一个 120 像素 x 90 像素的“404 图像”。所以让我们获取maxresdefault 缩略图并显示mqdefault 缩略图作为后备：

<img src="https://img.youtube.com/vi/{id}/maxresdefault.jpg" onload="if (this.naturalWidth === 120) {this.src = this.currentSrc.replace('maxresdefault', 'mqdefault');}">

【讨论】：

【解决方案6】：

我采用的解决方法是通过 ajax 调用内部方法，该方法使用 httpclient 检查图像是否返回 404 预制页面。如果是（任何状态 404），则返回我自己的匿名图像，如果不是，则返回字符串本身。

【讨论】：