Cómo se usa el atributo onerror de un elemento 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>

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

Author: Charlie, 2011-11-14
Source

3 answers

Esto funciona: 

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

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

Como Nikola señaló en el comentario a continuación, en caso de que la URL de copia de seguridad no sea válida, algunos navegadores activarán el evento "error" de nuevo, lo que dará lugar a un bucle infinito. Podemos evitar esto simplemente anulando el controlador de" error " a través de this.onerror=null;.

 83
Author: Šime Vidas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-21 13:37:12

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

El truco es que la carga de la imagen es asíncrona por naturaleza, por lo que onerror no sucede de forma solar, es decir, si llama a returnPhotoURL devuelve inmediatamente undefined bcs el método asíncrono de carga/manejo de la carga de la imagen acaba de comenzar.

Así que, realmente necesita envolver su script en una promesa y luego llamarlo 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;
        }
    });
}
 1
Author: Ron Royston,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-15 00:39:24

Muy 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
Author: Must keem,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-26 08:45:33