Open In App

AngularJS ng-src Directive

Improve
Improve
Like Article
Like
Save
Share
Report

The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produced until AngularJS has been evaluated. It is supported by <img> element. 

 

Syntax:

<img ng-src="url">

Parameter value:

  • url: This parameter specifies that the URL can be a string or any expression that is resulting in a string.

Example: This example describes the usage of the ng-src Directive in AngularJS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>AngularJS ng-src Directive</title>
    <script src=
    </script>
    <style>
        body {
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body ng-app="app">
    <h1>GeeksforGeeks</h1>
    <h2>ng-src Directive</h2>
    <div ng-controller="geek">
        <img ng-src="{{pic}}" />
    </div><br>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function ($scope) {
            $scope.pic =
        }]);
    </script>
</body>
</html>


Output:

 

Example 2: This is another example that describes the usage of the ng-src Directive in AngularJS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>AngularJS ng-src Directive</title>
    <script src=
    </script>
    <style>
        body {
            display: block;
            margin-left: auto;
            margin-right: auto;
            font-family: Arial, Helvetica, sans-serif;
            width: 50%;
            text-align: center;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body ng-app="">
    <div ng-init="displayImg = 'img/gfg.png'">
        <h1>GeeksforGeeks</h1>
        <h3>ng-src Directive</h3>
        <img ng-src="{{displayImg}}" alt="GFG_img">
    </div>
</body>
</html>


Output:

 



Last Updated : 08 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads