Open In App

AngularJS ng-srcset Directive

Improve
Improve
Like Article
Like
Save
Share
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=
    </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:

 



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