Skip to content
Related Articles

Related Articles

AngularJS ng-src Directive

Improve Article
Save Article
  • Last Updated : 08 Sep, 2022
Improve Article
Save Article

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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!