在Javascript中加载图像失败时检测

是否有一种方法可以确定图像路径是否指向实际图像，即在Javascript中加载图像失败时进行检测

对于web应用程序，我正在解析xml文件并从图像路径列表中动态创建HTML图像。服务器上可能不再存在某些图像路径，因此我希望通过检测哪些图像无法加载并删除该HTML img元素来正常地失败

注意JQuery解决方案将无法使用（老板不想使用JQuery，是的，我知道，不要让我开始）。我知道JQuery中有一种方法可以检测图像何时加载，但不知道它是否失败

我的代码用于创建img元素，但如何检测img路径是否导致加载图像失败

var imgObj = new Image();  // document.createElement("img");
imgObj.src = src;

---

下面是我为另一个答案编写的函数：。我不知道它是否正是您所需要的，但它使用了您将使用的各种技术，包括

onload

、

onerror

、

onabort

的处理程序和一般超时

---

因为图像加载是异步的，所以您可以使用图像调用此函数，然后稍后它调用回调函数并得到结果。

您可以尝试以下代码。我不能保证浏览器的兼容性，所以你必须测试一下

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

还有我对抵制jQuery的老板的同情

如下所示：

var img = new Image(); 
img.src = imgUrl; 

if (!img.complete) {

//has picture
}
else //not{ 

}

---

答案很好，但它带来了一个问题。当您直接分配

onload

或

onerror

时，它可能会替换先前分配的回调。这就是为什么有一个很好的方法“在调用它的EventTarget上注册指定的侦听器”，正如他们所说的那样。您可以在同一事件上注册任意数量的侦听器

让我把答案改写一下

function testImage(url) {
    var tester = new Image();
    tester.addEventListener('load', imageFound);
    tester.addEventListener('error', imageNotFound);
    tester.src = url;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

因为外部资源加载过程是异步的，所以使用带有承诺的现代JavaScript会更好，如下面所示

function testImage(url) {

    // Define the promise
    const imgPromise = new Promise(function imgPromise(resolve, reject) {

        // Create the image
        const imgElement = new Image();

        // When image is loaded, resolve the promise
        imgElement.addEventListener('load', function imgOnLoad() {
            resolve(this);
        });

        // When there's an error during load, reject the promise
        imgElement.addEventListener('error', function imgOnError() {
            reject();
        })

        // Assign URL
        imgElement.src = url;

    });

    return imgPromise;
}

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) {
        console.log('That image is found and loaded', img);
    },

    function rejected() {
        console.log('That image was not found');
    }

);

这：

jQuery+CSS用于img 对于jQuery，这对我来说很有用：

$('img').error(function() {
    $(this).attr('src', '/no-img.png').addClass('no-img');
});

我可以在我的网站上的任何地方使用此图片，无论其大小，并具有以下CSS3属性：

img.no-img {
    object-fit: cover;
    object-position: 50% 50%;
}

提示1：使用至少800 x 800像素的方形图像

提示2：与人物肖像一起使用时，使用对象位置：20%50%

CSS仅用于背景img 对于缺少的背景图像，我还在每个

背景图像

声明中添加了以下内容：

background-image: url('path-to-image.png'), url('no-img.png');

注意：不适用于透明图像

Apache服务器端 另一个解决方案是在发送到浏览器之前使用Apache检测丢失的图像，并将其重新放置在默认的no-img.png内容中

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]

---

---

这可能会对你有所帮助：（这是jQuery，但它仍然可能会引导你走上正确的道路）尝试其中一个有趣的@ajax333221这个问题是你链接结果中的第一个：）写一个jQuery选择器来找到一个新老板。。。互联网是一个大地方。在某些浏览器中，这可能会提示您是否缓存了该图像——但如果没有加载回调，您甚至不需要等待片刻，就可以让浏览器有机会启动该图像的HTTP请求。这只是为了说点什么！图像加载是异步的。@emil.c由于某些原因，并不总是这样。ChaseMoskal（他不会让我通知…）说得对-只有在JS执行继续之前图像完成加载时才有效，这似乎在缓存图像时就会发生。知道有没有办法告诉它是否遇到重定向？这在webKit（Epiphany，Safari，…）上不起作用，取决于从哪个服务器获取图像。例如，有时imgur不发送存在的映像或404状态，并且在这种情况下不会触发错误事件。问题是您的消息“未找到该映像”。响应代码可能是500或403或其他代码。你不知道那是404。事实上，它不太可能是404，因为您可能不会尝试加载不在那里的映像。是否应该添加事件处理程序而不是直接Asignment可能我遗漏了一些内容，但是如果刚刚创建了“tester”，分配（tester.onload=…）如何替换回调？即使代码中某些模糊的部分在创建的每个图像中添加了一个事件，我们也不希望为了检测图像是否存在而保留这些事件。你完全正确。在这种特殊情况下，它可能不是问题，因为它很可能不会被替换。但是，一般来说，添加事件侦听器比直接指定方法更好。@JohnWeisz-Arrow函数是匿名的，因此调试起来比较困难，请小心使用。@GifCo我不愿意继续与您讨论这些问题。我被你的语言冒犯了。如果您认为我的答案不正确或不完整，请提出修改建议并解释您的理由。如果你认为某件事是不好的做法，用你自己的答案建议一个好的做法。为什么在这里讨论箭头函数？这是离题的。答案很好，尤其是因为旧浏览器不支持箭头功能（例如Internet Explorer）。虽然这是一个有用的属性，可以用作图像故障切换技术，但更详细的响应将有助于读者理解它。如此简短，如此有用！为了隐藏它：

@sorak的评论让我厌恶地笑了起来。这是正确答案。@J0ANMM隐藏图像的另一种方法是添加一个空的alt属性：太好了！我打印文本onerror=“this.alt='Not Valid image，请使用Link^'，而不是故障切换到图像

background-image: url('path-to-image.png'), url('no-img.png');

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]