The ng-srcset Directive in AngularJS is used to specify the srcset attribute of an element, ie, overriding the original srcset attribute of an
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
and
Syntax:
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>
<head>
<title>ng-srcset Directivetitle>
<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 Directiveh2>
<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>
<head>
<title>AngularJS ng-srcset Directivetitle>
<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>GeeksforGeeksh1>
<h3>ng-srcset Directiveh3>
<img ng-srcset="{{displayImg}}" alt="GFG_img">
div>
body>
html>
Output:
