Image not loading (need help how to reload image)

My application need to open image from URL. the problem is that sometime image error.

my directive

.directive('imageonerror', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.bind('error', function() {
            console.log('image is error');
			/*refresh image here*/
        });
    }
};});

in HTML code
<img ng-src="{{mylist.image}}" imageonerr>

How to refresh image in ionic or angular?

Any recommendations welcome :smile:

Do you want a fallback image or attempt another load?

A fallback can be done pretty easily like this.

.directive('fallbackSrc', function () {
    var fallbackSrc = {
        link: function postLink(scope, iElement, iAttrs) {
            iElement.bind('error', function() {
                angular.element(this).attr("src", iAttrs.fallbackSrc);
            });
        }
    }

Then have your markup like so.

<img class="pic" fallback-src="http://google.com/favicon.ico" ng-src="{{image}}"/>
1 Like

@mhartington in relation to this question but slightly different… Is there anyway to know when an image has resolved / loaded 100%?

Say you’re linking to a fairly large image on a server and want to do something once it’s fully loaded (play a sound or something) is there anyway to know WHEN that’s happened?

Thanks!

@edwrede_ZA you may want to take a look at this article,

It’s a lot of information, but it will show how to handle the loading of images

1 Like

@mhartington thank you,I’ll investigate that :slight_smile:

This solution works well on the web(during debugging) but on iOS it doesn’t work.
Any suggestions?