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: