AngularJS ng-srcset Directive Last Updated : 26 Aug, 2022 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: 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: Comment More infoAdvertise with us Next Article AngularJS ng-srcset Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-src Directive 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 produce 2 min read AngularJS ng-style Directive The ng-style Directive in AngularJS is used to apply custom CSS styles on an HTML element. The expression inside the ng-style directive must be an object. It is supported by all the HTML elements. Syntax: <element ng-style="expression"> Content ... </element>Parameter: expression: It rep 2 min read AngularJS | ng-selected Directive The ng-selected Directive in AngularJS is used to specify the selected attribute of an HTML element. It can be used to select the default value specified on an HTML element. If the expression inside the ng-selected directive returns true then the selected option value will be displayed otherwise not 1 min read AngularJS ng-transclude Directive The ng-transclude directive is used to mark the insertion point for transcluded DOM of the nearest parent that uses transclusion. Use transclusion slot name as the value of ng-transclude or ng-transclude-slot attribute. If the transcluded content has more than one DOM node with the whitespace text n 3 min read AngularJS ng-value Directive The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> 2 min read Like