web-dev-qa-db-fra.com

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

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.

htmlcssimageonerror
32
Shahrukh

Cela marche:

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

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

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

101
Šime Vidas

C'est en fait difficile, surtout si vous prévoyez de renvoyer une URL d'image pour les 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 par programmation dans CSS.

L'astuce est que le chargement de l'image est asynchrone par nature, donc le onerror ne se produit pas de façon sunchronique, c'est-à-dire que si vous appelez returnPhotoURL il retourne immédiatement undefined bcs la méthode asynchrone de chargement/la prise en charge de la charge d'image vient de commencer.

Donc, vous devez vraiment envelopper votre script dans une promesse, puis l'appeler comme ci-dessous. REMARQUE: 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;
        }
    });
}
1
Ron Royston

très simple

  <img onload="loaded(this, 'success')" onerror="error(this, 
 'error')"  src="someurl"  alt="" />

 function loaded(_this, status){
   console.log(_this, status)
  // do your work in load
 }
 function error(_this, status){
  console.log(_this, status)
  // do your work in error
  }
0
Asif J