Aquí la tarea es cambiar la URL de origen de la imagen con la ayuda de AngularJS.
Enfoque: El enfoque es cambiar la URL de la imagen cuando el usuario hace clic en el botón. Cuando un usuario hace clic en un botón, se llama a un método junto con la nueva URL, ese método reemplaza la nueva URL con la antigua en el controlador.
Ejemplo 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 = "https://media.geeksforgeeks.org/wp-content/uploads/20190515121004/gfgbg1-300x136.png"; $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( 'https://media.geeksforgeeks.org/wp-content/uploads/20190515120525/gfglogo1.png')"> Change Image</button> <br> <br> <img src="{{imgUrl}}"> </div> </div> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, el cambio de URL se puede ver en la salida.
<!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 = "https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png"; $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( 'https://media.geeksforgeeks.org/wp-content/uploads/20190529122826/bs11.png')"> Change Image</button> <br> <br> URL - {{imgUrl}} <img src="{{imgUrl}}"> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA