AngularJs using ng-src Directive

In this blog, we are going to see how to use 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:  

myApp.controller("myController", function ($scope) {

    var info = {
        name: "Vipul Malhotra",
        img: "/Images/img.jpg"
    };
    $scope.information = info;
});

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: 

<div ng-controller="myController">
        <div style="margin-bottom:10px;">
           Name: {{information.name}}

       </div>
       <div>
           <img alt="UserImage" ng-src="{{information.img}}" style="height:200px;width:200px;" />
       </div>

   </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: