如何使用 AngularJS 更改图像源 URL？

这里的任务是在 AngularJS 的帮助下更改图像的源 URL。

方法：方法是在用户单击按钮时更改图像的 URL。当用户单击按钮时，会调用一个方法以及新 URL，该方法将新 URL 替换为控制器中的旧 URL。

示例 1：

  

    
    
    
        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;
            };
        });
    

  

    
        GeeksForGeeks
    
    
        How to Change Image Src URL in AngularJS
    
    
        
            
                Change Image
            
            
            
        
    

  
 

输出：

示例 2：在此示例中，可以在输出中看到 URL 的变化。

  

    
    
  
    
        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;
            };
        });
    

  

    
        GeeksForGeeks
    
    
        How to Change Image Src URL in AngularJS
    
    
        
            
                Change Image
            
            
            URL - {{imgUrl}}
            
        
    

  
     

输出：