检测图像何时无法在 JavaScript 中加载

Question

有没有办法确定图片路径是否指向实际图片，即检测图片何时无法在 JavaScript 中加载。

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

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

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

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

Answer 1

这是@emil.c 答案的变体，但根据图像加载与否以真/假解决（而不是在失败时抛出错误）：

function testImage(url) {
  if (!url || typeof url !== 'string') return Promise.resolve(false);
  return new Promise((resolve) => {
    const imgElement = new Image();
    imgElement.addEventListener('load', () => resolve(true));
    imgElement.addEventListener('error', () => resolve(false));
    imgElement.src = url;
  });
}

Answer 2

用于 img 的 jQuery + CSS

使用 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：用于人物肖像，请使用object-position: 20% 50%;

CSS 仅适用于 background-img

对于缺少的背景图片，我还在每个background-image 声明中添加了以下内容：

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]

Answer 3

这个：

<img onerror="this.src='/images/image.png'" src="...">

Answer 4

/**
 * Tests image load.
 * @param {String} url
 * @returns {Promise}
 */
function testImageUrl(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.addEventListener('load', resolve);
    image.addEventListener('error', reject);
    image.src = url;
  });
}

return testImageUrl(imageUrl).then(function imageLoaded(e) {
  return imageUrl;
})
.catch(function imageFailed(e) {
  return defaultImageUrl;
});

Answer 5

答案很好，但它引入了一个问题。每当您直接分配onload 或onerror 时，它可能会替换之前分配的回调。这就是为什么有一个很好的方法“在调用它的 EventTarget 上注册指定的侦听器”，正如他们在MDN 上所说的那样。您可以在同一事件上注册任意数量的侦听器。

让我稍微重写一下答案。

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");

由于外部资源加载过程是异步的，因此使用带有 promise 的现代 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');
    }

);

Answer 6

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

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 的老板表示同情！

Answer 7

如下：

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

if (!img.complete) {

//has picture
}
else //not{ 

}

Answer 8

这是我为另一个答案编写的函数：Javascript Image Url Verify。我不知道它是否正是您所需要的，但它使用了您将使用的各种技术，包括onload、onerror、onabort 的处理程序和一般超时。

由于图像加载是异步的，因此您使用图像调用此函数，然后稍后它会调用您的回调并返回结果。