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) {
  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}}
  5. </div>
  6. <div>
  7. <img alt="UserImage" ng-src="{{information.img}}" style="height:200px;width:200px;" />
  8. </div>
  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: