Làm sao người ta sử dụng thuộc tính onerror của một phần tử 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> 

này dường như không làm việc trong Chrome hoặc Mozilla nhưng làm việc trong IE.

Answer 1

này hoạt động:

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

Live Demo:http://jsfiddle.net/oLqfxjoz/

Như Nikola chỉ ra trong các bình luận dưới đây, trong trường hợp các URL sao lưu là không hợp lệ là tốt, một số trình duyệt sẽ kích hoạt các "lỗi "sự kiện một lần nữa mà sẽ dẫn đến một vòng lặp vô hạn. Chúng tôi có thể bảo vệ chống lại điều này bằng cách đơn giản vô hiệu hóa trình xử lý "lỗi" qua this.onerror=null;.

Answer 2

Điều này thực sự phức tạp, đặc biệt nếu bạn định trả lại url hình ảnh cho các trường hợp sử dụng nơi bạn cần ghép các chuỗi với URL hình ảnh điều kiện onerror, ví dụ: bạn có thể muốn lập trình tham số url trong CSS.

Bí quyết là hình ảnh tải là không đồng bộ của thiên nhiên nên onerror không xảy ra sunchronously, ví dụ: nếu bạn gọi returnPhotoURL nó ngay lập tức trả undefined BCS phương pháp không đồng bộ của tải/xử lý tải hình ảnh chỉ bắt đầu.

Vì vậy, bạn thực sự cần phải bọc kịch bản của bạn trong một Lời hứa sau đó gọi nó như dưới đây. LƯU Ý: tập lệnh mẫu của tôi thực hiện một số việc khác nhưng hiển thị khái niệm chung:

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