if a ngSrc path resolves to a 404, is there a way to fallback to a default?

by

It’s a pretty simple directive to watch for an error loading an image and to replace the src. (Plunker)

Html:

<img ng-src="https://stackoverflow.com/questions/16310298/smiley.png" err-src="http://google.com/favicon.ico" />

Javascript:

var app = angular.module("MyApp", []);

app.directive('errSrc', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('error', function() {
        if (attrs.src != attrs.errSrc) {
          attrs.$set('src', attrs.errSrc);
        }
      });
    }
  }
});

If you want to display the error image when ngSrc is blank you can add this (Plunker):

attrs.$observe('ngSrc', function(value) {
  if (!value && attrs.errSrc) {
    attrs.$set('src', attrs.errSrc);
  }
});

The problem is that ngSrc doesn’t update the src attribute if the value is blank.

More Related Contents:

  1. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  2. How to access parent scope from within a custom directive *with own scope* in AngularJS?
  3. How can I dynamically add a directive in AngularJS?
  4. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  5. How to select an element by classname using jqLite?
  6. AngularJS ng-style with a conditional expression
  7. Confused about Angularjs transcluded and isolate scopes & bindings
  8. Rendering directives within $sce.trustAsHtml
  9. How to allow only a number (digits and decimal point) to be typed in an input?
  10. How to autocapitalize the first character in an input field in AngularJS?
  11. How to understand the `terminal` of directive?
  12. How can I test events in angular?
  13. Custom form validation directive to compare two fields
  14. AngularJS : ng-repeat filter when value is greater than
  15. AngularJS Group By Directive without External Dependencies
  16. AngularJS watch DOM change
  17. How do I apply an AngularJS directive based on a class set by ng-class?
  18. $apply vs $digest in directive testing
  19. How to use “ng-repeat” within template of a directive in Angular JS?
  20. Bind class toggle to window scroll event
  21. Angular adds strange options into select element when setting model value
  22. Angular directive for a fallback image
  23. Enable/Disable Anchor Tags using AngularJS
  24. What is ng-transclude?
  25. How to use `replace` of directive definition?
  26. How to detect browser using angularjs?
  27. AngularJS. Convert tag value (Unix time to human-readable time)
  28. How to implement an ng-change for a custom directive
  29. When to use double braces {{}} in angularJS
  30. how do I get ng-include directive to work with a Content Delivery Network?

Leave a Comment