AngularJS ngsrcset

  • AngularJS provides ng-srcset attribute directive for handling multiple images based on condition.
  • In AngularJS, the ng-srcset directive is used to handling responsive images.
  • The user can use this directive for displaying different images based on screen width.
  • In AngularJS, the ng-srcset directive overrides the original src attribute of an <img> element.
  • If our application has AngularJS code inside the srcset value, the ng-srcset directive should be used instead of srcset.
  • The ng-srcset directive makes sure the image is not displayed wrong before AngularJS has evaluated the code.
  • The ng-srcset directive is compiling at the priority level “99”.

Syntax for ng-srcset directive in AngularJS:

<img ng-srcset= “string” ></img>

Parameter value for ng-srcset directive in AngularJS:

Value Type Description
string template It is a string value, or an expression resulting in a string.

Sample coding for ng-srcset directive in AngularJS:

 Tryit<!DOCTYPE html>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="
    <body ng-app="">
        <h2>ng-srcset Directive in AngularJS Tutorials</h2>
        <div ng- init="source=’logo.png’ ">
        <img ng-srcset=” {{source}} 2x”></img>

Code Explanation for ng-srcset directive in AngularJS:

Code Explanation for AngularJS ngsrcset

  1. AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
  2. The AngularJS application is defined by ng-app=" ". The application runs inside the <body> tag. It’s also used to define a <body> tag as a root element.
  3. The ng-init=”source= ‘logo.png’ “ is used to define the initial value of the source variable is “logo.png” image.
  4. The ng-srcset= “{{source}} 2x” is used to dynamically bind source image based on screen width. Here the 2x used for a high pixel density desktop display.

Sample Output for ng-srcset directive in AngularJS:

Sample Output for AngularJS ngsrcset

  1. The output shows that the logo image was load when the page was load based on the screen width. Here we have used 2x for pixel density which have high pixel density for desktop display.

Related Searches to angularjs ngsrcset directive