Use of ng-src vs src

by

From Angular docs

The buggy way to write it:

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

The correct way to write it:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

Why? this is because on load of page, before angular bootstrapping and creation of controllers, browser will try to load image from http://www.gravatar.com/avatar/{{hash}} and it will fail. Then once angular is started, it understands that that {{hash}} has to be replaced with say logo.png, now src attribute changes to http://www.gravatar.com/avatar/logo.png and image correctly loads. Problem is that there are 2 requests going and first one failing.

TO solve this we should use ng-src which is an angular directive and angular will replace ng-src value into src attribute only after angular bootstrapping and controllers are fully loaded, and at that time {{hash}} would have already been replaced with correct scope value.

More Related Contents:

  1. The Advantages when we put AngularJS within Symfony web application
  2. AngularJS access parent scope from child controller
  3. How to Display blob (.pdf) in an AngularJS app
  4. How to call a method defined in an AngularJS directive?
  5. How to execute AngularJS controller function on page load?
  6. How do I store data in local storage using Angularjs?
  7. Angularjs dynamic ng-pattern validation
  8. Is there a way to make AngularJS load partials in the beginning and not at when needed?
  9. Angular js init ng-model from default values
  10. How to unsubscribe to a broadcast event in angularJS. How to remove function registered via $on
  11. Angularjs prevent form submission when input validation fails
  12. Insert an angular js template string inside an element
  13. angular js unknown provider
  14. How can I set a dynamic model name in AngularJS?
  15. How to call a function from another controller in AngularJS? [duplicate]
  16. Directive isolate scope with ng-repeat scope in AngularJS
  17. Accessing attributes from an AngularJS directive
  18. Angular $location.path not working
  19. Angular Js – set token on header default
  20. AngularJs ReferenceError: $http is not defined
  21. RegEx for no whitespace at the beginning and end
  22. Can you change templateUrl on the fly?
  23. angularjs move focus to next control on enter
  24. AngularJS – Get List of All Registered Services?
  25. What is `priority` of ng-repeat directive can you change it?
  26. Fontawesome is not working when project is built with grunt
  27. angularjs text area character counter
  28. How to ‘unwatch’ an expression
  29. Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?
  30. scope and controller instantiation with ui router

Leave a Comment