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><html><head><title>Wikitechy AngularJS Tutorials</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
angular.min.js"></script></head><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></body></html>
Code Explanation for ng-src directive in AngularJS:
AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
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.
The ng-init=”source= ‘logo.png’ “ is used to define the initial value of the source variable is “logo.png”.
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:
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.
