Open In App

AngularJS ng-srcset Directive

Last Updated : 26 Aug, 2022
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:

 



Similar Reads

HTML | &lt;source&gt; srcset Attribute
The HTML srcset attribute is used to specifies the URL of an image to use in different situations. when &lt;source&gt; is used in &lt;picture&gt; it is requiredSyntax: &lt;source srcset="URL"&gt; Attribute Values URL: It specifies the URL of image Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name=&quot;viewport&quot;
1 min read
AngularJS ng-show Directive
The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. Syntax: &lt;element ng-show="expression"&gt; Contents... &lt;/element&gt; Parameter Value: expre
2 min read
AngularJS ng-init Directive
The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. Syntax: &lt;element ng-init = "expression"&gt; ... &lt;/element&gt;Example: This example descr
1 min read
AngularJS ng-if Directive
The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it is false then the element is removed and if it is
2 min read
AngularJS ng-dblclick Directive
The ng-dblclick Directive in AngluarJS is used to apply custom behavior when an element is clicked double. It can be used to show or hide some element or it can popup an alert or change the color of text when it is clicked twice. This means that the element's original ondblclick event will not be overridden by this directive, both will be executed.
2 min read
AngularJS ng-keypress Directive
The ng-keypress Directive in AngluarJS is used to apply custom behavior on a keypress event. It is mainly used to specify what to do when the keyboard is utilized with a particular HTML element. The order of sequence that the key is pressed is Keydown, Keypress, and keyup. It is supported by &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elemen
2 min read
AngularJS ng-keydown Directive
The ng-keydown Directive in AngluarJS is used to apply custom behavior on a keydown event. This directive will not be overridden by the element's original onkeydown event. Both the onkeydown event &amp; the ng-keydown Directive will be executed. It is supported by &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elements. Syntax: &lt;element ng-k
2 min read
AngularJS ng-keyup Directive
The ng-keyup Directive in AngluarJS is used to apply custom behavior on a keyup event. It is supported by &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elements. Syntax: &lt;element ng-keyup="expression"&gt; Contents... &lt;/element&gt; Parameter: expression: When a keypress is finished, then the followed expression will be executed.Example 1:
2 min read
AngularJS ng-href Directive
The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will most likely return a 404 error while ng-href direct
2 min read
AngularJS ng-focus Directive
The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by &lt;a&gt;, &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt; elements. Syntax: &lt;element ng-focus="expression"&gt; Contents...
1 min read