AngularJs Change Image Src URL
AngularJs Change Image Src URL : Sometimes we need to change the image source in angularjs. There are many ways to change the Image source in AngularJs. Here in this tutorial we are going to explain how you can change the image source in AngularJs. You can use our online editor to edit & run the code online.
AngularJs Change Image Src URL Example
You can change the image url simply as below –
AngularJs Change Image Src URL Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.imageUrl = "http:://example.com/images/demo.png";
$scope.changeUrl = function(url) {
$scope.imageUrl = url;
};
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click ="changeUrl('http:://example.com/images/logo.png')">Change Url</button>
<br>
<img src="{{imageUrl}}" >
</div>
</div>
</body>
</html>
|
If you click on the change url button it will change the image source url with new url passed in the function method.
Advertisements
