Open In App

AngularJS ng-srcset Directive

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The ng-srcset Directive in AngularJS is used to specify the srcset attribute of an <img> element, ie, overriding the original srcset attribute of an <img> element. It helps to ensure that the wrong image is not produced until AngularJS has been evaluated. This directive must be used instead of using the srcset, especially when the required AngularJS code is inside of the srcset value. It is supported by <img> and <source> element. 

Syntax:

<img ng-srcset="url">

Parameter value:

  • url: It represents the expression or a string value, whose final output will be a string.

Example 1: This example describes the implementation of the ng-srcset Directive in AngularJS.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>ng-srcset Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
</head>

<body ng-app="app" style="text-align:center">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h2>ng-srcset Directive</h2>
    
    <div ng-controller="geek">
        <img ng-srcset="{{pic}}" /><br><br><br>
    </div>

    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function ($scope) {
            $scope.pic =
"https://media.geeksforgeeks.org/wp-content/uploads/20190328034223/ngimg1.png";
        }]);
    </script>
</body>

</html>

Output:

ngsrcset

Example 2: This is another example that illustrates the use of the AngularJS ng-srcset Directive.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>AngularJS ng-srcset Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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.jpg'">
        <h1>GeeksforGeeks</h1>
        <h3>ng-srcset Directive</h3>
        <img ng-srcset="{{displayImg}}" alt="GFG_img">
    </div>
</body>

</html>

Output:

 

V
Vishal Chaudhary 2
Improve
Article Tags :

Explore

Lightbox