das image.onError -Ereignis wird nie ausgelöst, aber das Image ist keine gültigen Daten - Sie müssen umgehen
Ich versuche, ein Bild mit JavaScript an eine Seite anzuhängen:
image = document.createElement('img');
image.onload = function(){
document.body.appendChild(image);
}
image.onerror = function(){
//display error
}
image.src = 'http://example.com/image.png';
Der Benutzer muss authentifiziert sein, um dieses Bild sehen zu können. Wenn dies nicht der Fall ist, möchte ich eine Fehlermeldung anzeigen. Leider gibt der Server keine HTTP-Fehlermeldung zurück, sondern leitet die Anfrage auf eine (meistens leere) Seite um. Ich erhalte einen HTTP 200, aber die Warnung Resource interpreted as Image but transferred with MIME type text/html und nichts wird angezeigt.
Wie kann ich mit diesem Fall umgehen? Ich kann nicht ändern, was der Webserver bereitstellt, wenn der Benutzer nicht authentifiziert ist.
Überprüfen Sie im Ereignis-Listener image.onload, ob image.width und image.height beide Null sind (vorzugsweise image.naturalWidth und image.naturalHeight, wenn sie unterstützt werden).
Wenn sowohl die Breite als auch die Höhe Null sind, wird das Bild als ungültig betrachtet.
Demo: http://jsfiddle.net/RbNeG/
// Usage:
loadImage('notexist.png');
function loadImage(src) {
var image = new Image;
image.onload = function() {
if ('naturalHeight' in this) {
if (this.naturalHeight + this.naturalWidth === 0) {
this.onerror();
return;
}
} else if (this.width + this.height == 0) {
this.onerror();
return;
}
// At this point, there's no error.
document.body.appendChild(image);
};
image.onerror = function() {
//display error
document.body.appendChild(
document.createTextNode('\nError loading as image: ' + this.src)
);
};
image.src = src;
}
Hier ist meine Lösung. Wenn ich 404 für mein Bild habe - versuche ich, eines meiner Arrays einzufügen, das 200 OK ist (reines Javascript). Bilder müssen sich im selben Pfad befinden. Andernfalls gibt meine Funktion 'no-image.png' zurück. jQuery/JavaScript zum Ersetzen defekter Bilder