Erkennen Sie, wenn ein Bild nicht in Javascript geladen werden kann

Gibt es eine Möglichkeit zu bestimmen, ob ein Bildpfad zu einem tatsächlichen Bild führt, dh zu erkennen, wenn ein Bild nicht in Javascript geladen werden kann.

Für eine Web-App analysiere ich eine XML-Datei und erstelle dynamisch HTML-Bilder aus einer Liste von Bildpfaden. Einige Bildpfade sind möglicherweise nicht mehr auf dem Server vorhanden, daher möchte ich ordnungsgemäß fehlschlagen, indem ich erkenne, welche Bilder nicht geladen werden können, und dieses HTML-img-Element lösche.

Hinweis JQuery-Lösungen können nicht verwendet werden (der Chef möchte JQuery nicht verwenden, ja, ich weiß, dass ich nicht damit anfangen kann). Ich kenne eine Möglichkeit in JQuery zu erkennen, wann ein Bild geladen wird, aber nicht, ob es fehlgeschlagen ist.

Mein Code zum Erstellen von IMG-Elementen, aber wie kann ich feststellen, ob der IMG-Pfad zu einem fehlgeschlagenen Laden des Bildes führt?

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

Sie können den folgenden Code ausprobieren. Ich kann jedoch nicht für die Browserkompatibilität bürgen, daher müssen Sie dies testen.

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

Und mein Mitgefühl für den jQuery-resistenten Chef!

Die Antwort ist nett, bringt aber ein Problem mit sich. Wann immer Sie onloadoder onerrordirekt zuweisen , kann es den zuvor zugewiesenen Rückruf ersetzen. Aus diesem Grund gibt es eine nette Methode, die "den angegebenen Listener auf dem EventTarget registriert, auf dem er aufgerufen wird", wie es auf MDN heißt . Sie können so viele Listener registrieren, wie Sie möchten.

Lassen Sie mich die Antwort ein wenig umschreiben.

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

Da der Prozess zum Laden externer Ressourcen asynchron ist, wäre es noch besser, modernes JavaScript mit Versprechungen wie den folgenden zu verwenden.

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');
    }

);

Dies:

<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 + CSS für img

Mit jQuery funktioniert das bei mir:

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

Und ich kann dieses Bild überall auf meiner Website verwenden, unabhängig von der Größe mit der folgenden CSS3-Eigenschaft:

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

TIPP 1: Verwenden Sie ein quadratisches Bild mit mindestens 800 x 800 Pixel.

TIPP 2: Zur Verwendung mit Personenporträts verwendenobject-position: 20% 50%;

CSS nur für Hintergrund-Img

Für fehlende Hintergrundbilder habe ich außerdem zu jeder background-imageDeklaration Folgendes hinzugefügt :

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

HINWEIS: Funktioniert nicht für transparente Bilder.

Apache-Serverseite

Eine andere Lösung besteht darin, fehlende Bilder mit Apache zu erkennen, bevor sie an den Browser gesendet und durch den Standardinhalt no-img.png ersetzt werden.

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

Hier ist eine Funktion, die ich für eine andere Antwort geschrieben habe: Javascript Image Url Verify . Ich weiß nicht , ob es genau das, was man braucht, aber es nutzt die verschiedenen Techniken , die Sie verwenden würden , die Handler für enthalten onload, onerror, onabortund eine allgemeine Timeout.

Da das Laden von Bildern asynchron ist, rufen Sie diese Funktion mit Ihrem Bild auf und rufen später Ihren Rückruf mit dem Ergebnis auf.

genau wie unten:

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

if (!img.complete) {

//has picture
}
else //not{ 

}