ng-src 无法正常工作，但 src 工作正常答案

【问题标题】：ng-src not working properly but src is working fineng-src 无法正常工作，但 src 工作正常
【发布时间】：2016-09-01 12:26:31
【问题描述】：

我正在尝试将图像添加到示例网页。但是每当我在 img 标签中使用 ng-src 时，图像都不会显示在页面上（如果我使用 'src' 代替 'ng-src'，图像是可见的）。这是我的 Html 和 JavaScript 文件。

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>

提前致谢。

【问题讨论】：

你为什么要使用ng-src？您使用的是硬编码的图像路径，所以src 很好

标签： javascript angularjs

【解决方案1】：

更改标记，使 ng-src 绑定到一个变量，而不是您之前设置的 URL：

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

【讨论】：

【解决方案2】：

这段代码有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>

和

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

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

【讨论】：