Как использовать атрибут onerror элемента img

Ответ 1

Это работает:

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

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

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

Ответ 2

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

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

Итак, вам действительно нужно обернуть ваш script в Promise, а затем вызвать его, как показано ниже. ПРИМЕЧАНИЕ: мой пример script выполняет некоторые другие функции, но показывает общее понятие:

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