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工作正常

回答

相关问题