AngularJs using ng-src Directive

ng-src directive overrides the original functionality of src. It is used when we need to have angular-js code inside the src value. Also, it makes sure that the image is not displayed wrong until the angular js code is evaluated.
 
We need to display a name and an image along with it. In order to do that, let's create a controller as below:  
  1. myApp.controller("myController", function ($scope) {  
  2.   
  3.     var info = {  
  4.         name: "Vipul Malhotra",  
  5.         img: "/Images/img.jpg"  
  6.     };  
  7.     $scope.information = info;  
  8. });  
In this controller,we have created an object "info" with name and img property into it. The img path "/Images/img.jpg"
is from inside the project directory.
 
Now on the html page, use the following code to bind the value: 
  1. <div ng-controller="myController">  
  2.         <div style="margin-bottom:10px;">  
  3.            Name: {{information.name}}  
  4.   
  5.        </div>  
  6.        <div>  
  7.            <img alt="UserImage" ng-src="{{information.img}}" style="height:200px;width:200px;" />  
  8.        </div>  
  9.   
  10.    </div>   
the ng-src binds the img path that we have mentioned in the controller to the property "img".
 
The resultant output is as follows:
 
 
Ebook Download
View all
Learn
View all