Question

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

Javascript＆amp; 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>

提前致谢。

Answer 1

更改标记，以便ng-src绑定到变量而不是之前设置的URL：

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

Answer 2

此代码中存在2-3个问题 1. myModule和mainModule（你的app.js正在创建一个名为myModule的模块，但在你的html中你正在使用mainModule）
2.提到的文件的顺序（应在app.js之前提及angular.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"; 
        };
    }]);

ng-src工作不正常，但src工作正常

2 个答案: