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
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
typeIV
July 27, 2017, 4:55am
6
This solution works well on the web(during debugging) but on iOS it doesn’t work.
Any suggestions?