¿Cómo se puede utilizar el atributo onerror de 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> 

Esto no parece funcionar en Chrome o Mozilla, pero funciona en IE.

Answer 1

Esto funciona:

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

Demostración en directo:http://jsfiddle.net/oLqfxjoz/

Como Nikola señaló en el comentario anterior, en caso de que la URL de copia de seguridad no es válido también, algunos navegadores activarán el "error "evento de nuevo que dará como resultado un ciclo infinito. Podemos protegernos de esto simplemente anulando el controlador de "error" a través del this.onerror=null;.

Answer 2

Esto es realmente complicado, especialmente si planea devolver una url de imagen para casos de uso en los que necesite concatenar cadenas con la URL de la imagen de condición onerror, p. es posible que desee establecer programáticamente el parámetro url en CSS.

El truco es que la carga de imágenes es asíncrona, por naturaleza, por lo que el onerror no sucede sunchronously, es decir, si se llama a returnPhotoURL, vuelve inmediatamente undefined BCS el método asíncrono de carga/el manejo de la carga de la imagen acaba de comenzar.

Por lo tanto, realmente debe ajustar su secuencia de comandos en una Promesa y luego llamarla como a continuación. Nota: Mi script de ejemplo hace algunas otras cosas, pero muestra el concepto general:

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