jaki sposób można użyć onError atrybutu elementu 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> 

nie wydają się działać w Chrome lub Mozilla ale działa w IE.

Answer 1

to działa:

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

żywo demo:http://jsfiddle.net/oLqfxjoz/

Jak Nikola podkreślono w komentarzu poniżej, w przypadku kopii zapasowych URL jest nieprawidłowy, a także niektóre przeglądarki wyzwoli „błąd "ponownie wydarzenie, które spowoduje nieskończoną pętlę. Możemy uchronić się przed tym przez po prostu anulowanie obsługi "błędu" przez this.onerror=null;.

Answer 2

To jest naprawdę trudne, zwłaszcza jeśli planujesz zwrócić adres URL obrazu dla przypadków użycia, w których musisz połączyć ciągi z adresem URL obrazu warunku onerror, np. możesz chcieć programowo ustawić parametr url w CSS.

Sztuką jest to, że obraz jest asynchroniczne ładowanie przez naturę tak onerror nie zdarza sunchronously, to znaczy jeśli zadzwonisz returnPhotoURL natychmiast powraca undefined BCS asynchroniczny metody ładowania/przenoszenia obciążenia obrazu właśnie zaczęło.

Tak naprawdę, naprawdę powinieneś zawinąć swój skrypt w obietnicę, a następnie zadzwonić jak poniżej. UWAGA: mój przykładowy skrypt wykonuje kilka innych czynności, ale pokazuje ogólną koncepcję:

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