Come si fa a utilizzare l'attributo onerror di un elemento img

Question

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> 

Questo non sembra funzionare in Chrome o Mozilla ma funziona in IE.

Answer 1

Questo funziona:

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

demo dal vivo:http://jsfiddle.net/oLqfxjoz/

Come Nikola ha sottolineato nel commento qui sotto, nel caso in cui l'URL di backup non è valido pure, alcuni browser attiveranno l ' "errore "di nuovo l'evento che si tradurrà in un ciclo infinito. Possiamo evitare questo semplicemente annullando il gestore di "errore" tramite this.onerror=null;.

Answer 2

Questo è in realtà difficile, soprattutto se si intende restituire un URL immagine per casi d'uso in cui è necessario concatenare stringhe con l'URL dell'immagine condizione onerror, ad es. potresti voler impostare in modo programmatico il parametro url in CSS.

Il trucco è che il caricamento delle immagini è asincrona per natura in modo che il onerror non accada sunchronously, vale a dire se si chiama returnPhotoURL restituisce immediatamente undefined bcs il metodo asincrono di carico/movimentazione del carico dell'immagine appena iniziata.

Quindi, è davvero necessario avvolgere il copione in una Promessa, quindi chiamarlo come di seguito. NOTA: il mio script di esempio fa alcune altre cose, ma mostra il concetto generale:

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