ng-src無法正常工作，但src工作正常

我試圖將圖像添加到示例網頁。但是，無論何時我在img標籤中使用ng-src，圖像都不會顯示在頁面上（如果我用'src'代替'ng-src'，圖像是可見的）。這是我的Html和JavaScript文件。ng-src無法正常工作，但src工作正常

的Javascript & HTML：

/** 
* Module 
* 
* Description 
*/ 
angular.module('myModule', []) 
    .controller('myCtrl', ['$scope', function($scope){ 
     $scope.clicked = ""; 
     $scope.clickMe = function() { 
      $scope.clicked= "Image Clicked";  
     }; 
    }]);

<html ng-app="mainModule"> 
<head> 
    <title>Testing For Image Click</title> 
    <script type="text/javascript" src="app.js"></script> 
    <script type="text/javascript" src="angular.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
</head> 
<body class="container" ng-controller="myCtrl"> 
    <div> 
     <img ng-src="bluegem.jpg" ng-click="clickMe()"/> 
    </div> 
</body>

在此先感謝。

來源

2016-05-06 Pranjal

爲什麼要使用'ng-src'呢？你正在使用一個硬編碼的圖像路徑，所以'src'很好 – mindparse

有這個代碼2-3問題
1. Mymodule中和mainModule（您app.js正在創建一個名爲模塊，但MyModule的HTML中使用的是mainModule）
2.爲了提檔的（angular.js應app.js 這裏之前，我加入了代碼

提到

<html ng-app="myModule"> 
<head> 
    <title>Testing For Image Click</title> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/> 

    Latest compiled and minified JavaScript 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> --> 


</head> 
<body class="container" ng-controller="myCtrl"> 
    <div> 
     <img ng-src="{{image}}" ng-click="clickMe()"/> 
    </div> 
</body>

And

angular.module('myModule', []) 
    .controller('myCtrl', ['$scope', function($scope){ 
     $scope.clicked=""; 
     $scope.image = "bluegem.jpg" 
     $scope.clickMe=function() 
     { 

      $scope.clicked="Image Clicked"; 
     }; 
    }]);

來源

2016-05-06 12:25:42 Rakeschand

現在它的工作..感謝您的幫助。 – Pranjal

更改的標記，以便NG-SRC綁定到一個變量，而不是一個網址，你有它安裝前：

<img ng-src="{{imageURL}}" ng-click="clickMe()"/>

來源

2016-05-06 12:23:07

ng-src無法正常工作，但src工作正常

回答

相關問題