The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> 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 <img> element.
Syntax:
<img ng-src="url">
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
<!DOCTYPE html> <html>
<head>
<title>AngularJS ng-src Directive</title>
<script src=
</script>
<style>
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: green;
}
</style>
</head>
<body ng-app="app">
<h1>GeeksforGeeks</h1>
<h2>ng-src Directive</h2>
<div ng-controller="geek">
<img ng-src="{{pic}}" />
</div><br>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.pic =
}]);
</script>
</body>
</html>
|
Output:
Example 2: This is another example that describes the usage of the ng-src Directive in AngularJS.
HTML
<!DOCTYPE html> <html>
<head>
<title>AngularJS ng-src 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.png'">
<h1>GeeksforGeeks</h1>
<h3>ng-src Directive</h3>
<img ng-src="{{displayImg}}" alt="GFG_img">
</div>
</body>
</html>
|
Output: