AngularJS ngsrc

  • In AngularJS, the ng-src directive is used to set path like src.
  • In AngularJS, the ng-src directive overrides the original src attribute of an <img> element.
  • If our application has AngularJS code inside the src value, the ng-src directive should be used instead of src.
  • The ng-src directive makes sure the image is not displayed wrong before AngularJS has evaluated the code.
  • The ng-src directive is compiling at the priority level “99”.

Syntax for ng-src directive in AngularJS:

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

Parameter value for ng-src directive in AngularJS:

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

Sample coding for ng-src directive in AngularJS:

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

Code Explanation for ng-src directive in AngularJS:

Code Explanation for AngularJS ngsrc

  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”.
  4. The ng-src= “{{source}}” is used to dynamically bind source variable to the ng-src attribute in <img> element.

Sample Output for ng-src directive in AngularJS:

Sample Output for AngularJS ngsrc

  1. The output shows that the logo.png image was loaded when the page was load. In AngularJS, the ng-src attribute is safer than original src attribute.

Related Searches to angularjs ngsrc directive