jQuery，检查图像是否存在返回假阴性答案

【问题标题】：jQuery, Check if image exists returns false negativejQuery，检查图像是否存在返回假阴性
【发布时间】：2015-07-25 05:50:47
【问题描述】：

我正在尝试在将图像插入网站之前确定它是否存在。

我已经尝试了所有方法 here 并且所有方法都对我知道存在的图像返回负值。例如：

$.ajax({
url:'https://s3-eu-west-1.amazonaws.com/stuffstory-v2-filepicker/thumbnails/5547b98e357a7f425f8b4570/555340a1357a7f673a8b456b.png',
type:'HEAD',
error:
    function(){
        console.log('No image')
    },
success:
    function(){
        console.log('There is an image')
    }
});

返回无图像结果，但如果您点击链接：Image 它显然就在那里。

我完全不知道为什么。

【问题讨论】：

试试这个stackoverflow.com/a/16596437/1113766

标签： jquery ajax image get

【解决方案1】：

您的跨域 AJAX 请求被CORS 安全策略阻止：

请求的资源上不存在“Access-Control-Allow-Origin”标头。

【讨论】：

【解决方案2】：

您可以为此使用Image：

var imageUrl = 'https://s3-eu-west-1.amazonaws.com/stuffstory-v2-filepicker/thumbnails/5547b98e357a7f425f8b4570/555340a1357a7f673a8b456b.png';
var img = new Image();
img.onload = function(){
    // will be called if image exists
};
img.onerror = function (){
   // will be called if image failed to download
};
img.src = imageUrl;

这样可以跨域下载图片。另见Image on MDN。

【讨论】：

现在现有图像显示为真，但不存在的图像也是如此。我有 9 个图像点，3 个有现有图像，6 个没有。我得到了 9 个阳性结果
在我的测试中，如果图片不存在，就会触发错误回调。你能发布你的尝试吗？
有趣。它似乎适用于这个 Fiddle jsfiddle.net/7z8t84fg，但不适用于我的开发站点，它只是本地的，所以我不能分享它。我正在遍历许多基于 JSON 响应的图像，我想知道这是否是问题
您使用哪种浏览器？这怎么行不通？它是否将不存在报告为存在或将存在报告为不存在？

【解决方案3】：

如 @crashet

所述

请求中没有“Access-Control-Allow-Origin”标头资源。

另一种选择：

使用onerror事件

如果加载图像时发生错误，则执行 JavaScript：

HTML：

<img src="https://s3-eu-west-1.amazonaws.com/stuffstory-v2-filepicker/thumbnails/5547b98e357a7f425f8b4570/555340a1357a7f673a8b456bewweweg" onerror="imgError()" />

JS：

function imgError()
{
alert('The image could not be loaded.');
}

JSFiddle Demo

【讨论】：

这太棒了。对不起，我应该说，我正在使用图像作为背景图像。我可以把这个应用到那个上吗？
@PaulAston 有背景图片，没有事件...对不起！

【解决方案4】：

您正在调用与您的应用程序位于不同域的请求，这就是它限制这一点的原因。如果您打开控制台窗口，您将看到错误。您需要使用 cors 来实现这一点。参考http://www.html5rocks.com/en/tutorials/cors/

【讨论】：

【解决方案5】：

您可以使用 jsonp 请求来加载跨域资源，例如您的案例中的图像

【讨论】：

【解决方案6】：

你可以这样做：

$(function () {
   //Image Error
   $("img").on("error", function () {
     var $img = $(this);
     var imgsrc = $img.attr("src");
     $img.attr("src", "New Image Path");
   });
});

【讨论】：