CODEWITHSUNDEEP
angularjsangularjs-directive
byrdr
byrdr

Reputation: 5467

angular fall back image on background-image error

I've used this sort of directive before for a fallback image if the image does not load correctly.

app.directive('fallbackSrc', function () {
var fallbackSrc = {
    link: function postLink(scope, element, attrs) {
      element.bind('error', function() {
        angular.element(this).css("background-image", attrs.fallbackSrc);
      });
    }
   }
   return fallbackSrc;
});

This works great when it is placed on the html like this, of course the directive would replace the src of the image instead of modifying the css:

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

I currently have a background-image though:

 <div class="issue-gallery-container" fallback-src="http://google.com/favicon.ico" style="background-image: url({{ AWS }}images/cover/{{ item.volume.number }}.{{ item.number }}.png)">

 </div>

The directive right now does not pick up the error on the element since it occurs in the elements css. How would I modify the directive to listen for an error on the elements background-image?

Upvotes: 2

Views: 2332

Answers (1)

Enkode
Enkode

Reputation: 4773

I would setup a "dummy" img directive that changes its parent css. Or you could create a a template to simplify things even more.

Here is a working plunker http://plnkr.co/edit/334WIH2VUGReVTUYt2Tb?p=preview Code is a bit messy but it works.

app.directive('backgroundFallbackSrc', function () {
  return {
    link : function(scope, element, attrs) {
      element.bind('error', function() {
         element.parent().css('background-image', 'url("' + attrs.backgroundFallbackSrc + '")');
      });
    }
   }
});

html

<div class="issue-gallery-container" style="display:block; height:2000px;">
   <img background-fallback-src="http://keithfimreite.com/BlogFiles/keithfimreite/SAAS.jpg" 
    ng-src="{{invalidImage}}" style="display:none;">        
</div>

Upvotes: 2

Related Questions