html - insertar - onerror img src

¿Cómo se usa 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 vivo: http://jsfiddle.net/oLqfxjoz/

Como señaló Nikola en el comentario siguiente, en caso de que la URL de respaldo tampoco sea válida, algunos navegadores activarán nuevamente el evento de "error", lo que dará como resultado un ciclo infinito. Podemos protegernos de esto simplemente anulando el manejador de "error" a través de this.onerror=null; .

Answer 2

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 imagen de condición onerror , por ejemplo, puede querer establecer programáticamente el parámetro url en CSS.

El truco es que la carga de imágenes es asincrónica por naturaleza, por lo que el onerror no ocurre de manera sunchronously, es decir, si usted llama a returnPhotoURL devuelve inmediatamente bcs undefined el método asíncrono de carga / manejo acaba de comenzar.

Entonces, realmente necesitas envolver tu script en Promesa y luego llamarlo como a continuación. NOTA: mi script de muestra 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;
        }
    });
}