Как использовать атрибут onerror элемента 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>

это, похоже, не работает в Chrome или Mozilla, но работает в IE.

29
css html image onerror

3 ответов

это работает:

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

демо: http://jsfiddle.net/oLqfxjoz/

Как указал Никола в комментарии ниже, в случае, если URL-адрес резервной копии также недействителен, некоторые браузеры снова вызовут событие "ошибка", которое приведет к бесконечному циклу. Мы можем защитить от этого, просто аннулировав обработчик "error" через this.onerror=null;.

83

это на самом деле сложно, особенно если вы планируете возвращать url-адрес изображения для случаев использования, когда вам нужно объединить строки с onerror URL изображения условия, например, вы можете программно установить url параметр в CSS.

трюк в том, что загрузка изображений асинхронна по своей природе, поэтому onerror не бывает sunchronously, т. е. если вы называете returnPhotoURL он сразу же возвращает undefined bcs асинхронный метод загрузки / обработки загрузки изображения просто началось.

Итак, вам действительно нужно обернуть свой сценарий в обещание, а затем вызвать его, как показано ниже. Примечание: мой пример скрипта делает некоторые другие вещи, но показывает общую концепцию:

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

очень просто

  <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