Matt York Matt York - 2 years ago 230
AngularJS Question

Angular directive for a fallback image

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 Source

No but you can create one.


<img fallback-src="" ng-src="{{image}}"/>


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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download