Angular directive for a fallback image

Question

If an image on a separate server doesn't exist I'd like to display a default image. Is there an angular directive to accomplish this?

Answer 1

No but you can create one.

http://jsfiddle.net/FdKKf/

HTML:

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

JS:

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

Answer 2

Is there an angular directive...

http://ngmodules.org/modules/angular-img-fallback

Github: https://github.com/dcohenb/angular-img-fallback

(32 stars as of now)