The ng-src Directive in AngularJS is used to specify the src attribute of an element, ie., it overrides the original src attribute for an
element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produced until AngularJS has been evaluated. It is supported by
element.
Syntax:
Parameter value:
- url: This parameter specifies that the URL can be a string or any expression that is resulting in a string.
Example: This example describes the usage of the ng-src Directive in AngularJS.
<html>
<head>
<title>AngularJS ng-src Directivetitle>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
script>
<style>
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: green;
}
style>
head>
<body ng-app="app">
<h1>GeeksforGeeksh1>
<h2>ng-src Directiveh2>
<div ng-controller="geek">
<img ng-src="{{pic}}" />
div><br>
<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 describes the usage of the ng-src Directive in AngularJS.
<html>
<head>
<title>AngularJS ng-src 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.png'">
<h1>GeeksforGeeksh1>
<h3>ng-src Directiveh3>
<img ng-src="{{displayImg}}" alt="GFG_img">
div>
body>
html>
Output:
