How to Change Image Source URL using AngularJS ?
Last Updated :
14 Oct, 2020
Here the task is to change the source URL of the image with the help of AngularJS.
Approach: The approach is to change the URL of the image when the user click on button. When a user clicks on a button then a method is called along with the new URL, that method replaces the new URL with the old one in controller.
Example 1:
<!DOCTYPE HTML>
< html >
< head >
< script src =
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js" >
</ script >
< script >
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.imgUrl =
$scope.changeURL = function (url) {
$scope.imgUrl = url;
};
});
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< p >
How to Change Image Src URL in AngularJS
</ p >
< div ng-app = "app" >
< div ng-controller = "controller" >
< button ng-click="changeURL(
Change Image</ button >
< br >
< br >
< img src = "{{imgUrl}}" >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, the URL changing can be seen in output.
<!DOCTYPE HTML>
< html >
< head >
< script src =
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js" >
</ script >
< script >
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.imgUrl =
$scope.changeURL = function (url) {
$scope.imgUrl = url;
};
});
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< p >
How to Change Image Src URL in AngularJS
</ p >
< div ng-app = "app" >
< div ng-controller = "controller" >
< button ng-click="changeURL(
Change Image</ button >
< br >
< br >
URL - {{imgUrl}}
< img src = "{{imgUrl}}" >
</ div >
</ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...