JavaScriptで画像の読み込みに失敗したことを検出する

画像パスが実際の画像につながるかどうかを判断する方法はありますか。つまり、JavaScriptで画像の読み込みに失敗した場合にそれを検出します。

Webアプリの場合は、xmlファイルを解析して、画像パスのリストからHTML画像を動的に作成しています。一部の画像パスがサーバーに存在しなくなった可能性があるため、ロードに失敗した画像を検出し、そのHTML img要素を削除することで、正常に失敗したいと思います。

注：JQueryソリューションは使用できません（上司はJQueryを使用したくないので、はい、始めません）。画像が読み込まれたときにJQueryで検出する方法は知っていますが、失敗したかどうかはわかりません。

img要素を作成するコードですが、imgパスが画像の読み込みに失敗したかどうかをどのように検出できますか？

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

次のコードを試すことができます。ただし、ブラウザの互換性を保証することはできないので、テストする必要があります。

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に抵抗する上司に同情！

答えはいいですが、問題が1つあります。onloadまたはonerror直接割り当てると、以前に割り当てられたコールバックが置き換えられる可能性があります。MDNで言うように、「指定されたリスナーを、呼び出された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");

外部リソースの読み込みプロセスは非同期であるため、次のような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');
    }

);

この：

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

/**
 * 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;
});

jQuery + img用CSS

jQueryでこれは私のために働いています：

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

次のCSS3プロパティを使用すると、サイズに関係なく、この画像をWebサイトのどこにでも使用できます。

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

ヒント1：少なくとも800 x 800ピクセルの正方形の画像を使用します。

ヒント2：人物のポートレートで使用する場合は、object-position: 20% 50%;

background-img専用のCSS

不足している背景画像については、各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]

これは私が別の答えのために書いた関数です：Javascript Image Url Verify。それはあなたが必要な正確に何だかどうかは知りませんが、それはあなたがハンドラが含まれ使用する様々な技術使用しonload、onerror、onabortおよび一般的なタイムアウトを。

画像の読み込みは非同期であるため、この関数を画像で呼び出してから、後でコールバックを呼び出して結果を返します。

以下のように：

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

if (!img.complete) {

//has picture
}
else //not{ 

}