web-dev-qa-db-fra.com

l'événement image.onError ne se déclenche jamais, mais les images ne sont pas des données valides - il est nécessaire de contourner le problème.

J'essaie d'ajouter une image à une page à l'aide de JavaScript:

image = document.createElement('img');
image.onload = function(){
    document.body.appendChild(image);
}
image.onerror = function(){
    //display error
}
image.src = 'http://example.com/image.png';

L'utilisateur doit être authentifié pour voir cette image. S'ils ne le sont pas, je souhaite afficher un message d'erreur. Malheureusement, le serveur ne renvoie pas de message d'erreur HTTP, mais redirige plutôt la demande vers une page (généralement) vide. Je reçois donc un HTTP 200, mais l'avertissement Resource interpreted as Image but transferred with MIME type text/html et rien ne s'affichent.

Comment puis-je gérer ce cas? Je ne suis pas en mesure de modifier les informations fournies par le serveur Web si l'utilisateur n'est pas authentifié.

javascripterror-handlingmime-types
17
Chris Sobolewski

Dans l'écouteur d'événements image.onload, vérifiez si image.width et image.height sont tous deux égaux à zéro (de préférence image.naturalWidth et image.naturalHeight, lorsqu'ils sont pris en charge).

Si la largeur et la hauteur sont égales à zéro, l'image est considérée comme non valide.

Démo: 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;
}
39
Rob W

Voici ma solution. Si j'ai 404 pour mon image, j'essaie d'insérer un de mes tableaux 200 OK (pur Javascript). Les images doivent être dans le même chemin. Sinon, ma fonction renverra «no-image.png». jQuery/JavaScript pour remplacer les images endommagées

0
Дмитрий Дорогонов