Skip to content
Related Articles

Related Articles

AngularJS ng-srcset Directive

Improve Article
Save Article
  • Last Updated : 26 Aug, 2022
Improve Article
Save Article

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=
    </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 =
        }]);
    </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=
    </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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!