html balise Comment utilise-t-on l'attribut onerror d'un élément img?




img title (2)

CSS:

.posting-logo-div {  }
.posting-logo-img { height:120px; width:120px; }
.posting-photo-div { height:5px;width:5px;position:relative;top:-140px;left:648px; }
.posting-photo-img { height:240px; width:240px; }

HTML:

<div id="image" class="posting-logo-div"><img src="../images/some-logo1.jpg" onerror="this.src='../images/no-logo-120.jpg';" class="posting-logo-img"></div>
<div id="photo" class="posting-photo-div"><img src="../images/some-logo2.jpg" onerror="this.src='../images/no-logo-240.jpg';" class="posting-photo-img"></div>

Cela ne semble pas fonctionner dans Chrome ou Mozilla mais fonctionne dans IE.


Ceci est particulièrement délicat, surtout si vous prévoyez de renvoyer une URL d'image pour des cas d'utilisation où vous devez concaténer des chaînes avec l'URL d'image de condition onerror , par exemple, vous pouvez définir le paramètre url en CSS par programmation.

L'astuce est que le chargement de l'image est asynchrone par nature donc l' onerror ne se produit pas de manière sournoise, c'est-à-dire que si vous appelez returnPhotoURL il renvoie immédiatement undefined bcs la méthode asynchrone de chargement / gestion de la charge d'image vient de commencer.

Donc, vous avez vraiment besoin d'envelopper votre script dans une Promesse, puis appelez-le comme ci-dessous. NOTE: mon exemple de script fait d'autres choses mais montre le concept général:

returnPhotoURL().then(function(value){
    doc.getElementById("account-section-image").style.backgroundImage = "url('" + value + "')";
}); 


function returnPhotoURL(){
    return new Promise(function(resolve, reject){
        var img = new Image();
        //if the user does not have a photoURL let's try and get one from gravatar
        if (!firebase.auth().currentUser.photoURL) {
            //first we have to see if user han an email
            if(firebase.auth().currentUser.email){
                //set sign-in-button background image to gravatar url
                img.addEventListener('load', function() {
                    resolve (getGravatar(firebase.auth().currentUser.email, 48));
                }, false);
                img.addEventListener('error', function() {
                    resolve ('//rack.pub/media/fallbackImage.png');
                }, false);            
                img.src = getGravatar(firebase.auth().currentUser.email, 48);
            } else {
                resolve ('//rack.pub/media/fallbackImage.png');
            }
        } else {
            img.addEventListener('load', function() {
                resolve (firebase.auth().currentUser.photoURL);
            }, false);
            img.addEventListener('error', function() {
                resolve ('https://rack.pub/media/fallbackImage.png');
            }, false);      
            img.src = firebase.auth().currentUser.photoURL;
        }
    });
}

Cela marche:

<img src="invalid_link"
     onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
>

Démonstration en direct: http://jsfiddle.net/oLqfxjoz/

Comme Nikola l'a souligné dans le commentaire ci-dessous, dans le cas où l'URL de sauvegarde est également invalide, certains navigateurs déclencheront à nouveau l'événement "error", ce qui se traduira par une boucle infinie. Nous pouvons nous prémunir contre cela en annulant simplement le gestionnaire "error" via this.onerror=null; .





onerror