Question

如何使用ng-src加载图片？我试图使用以下代码从onclick事件交换图像文件的源，但无济于事。

<html ng-app="ui.bootstrap.demo">
    <body>
        <pre>{{checkModel}}</pre>
        <div class="btn-group">
            <!--            Add DB names to label -->
            <label class="btn btn-primary" ng-model="checkModel.left" ng-click="toggleImage()" btn-checkbox><img ng-src="{{imageSwapUrl}}"  />Left</label>
            <label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox><img id="dbIcon"  src="images/database-5-16.ico" />Middle</label>
            <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox><img id="dbIcon"  src="images/database-5-16.ico" />Right</label>
        </div>
        <?php
        // put your code here
        ?>
        <script>
            angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
            angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
                $scope.imageSwapUrl = "images/database-5-16.ico";
                $scope.checkModel = {
                    left: false,
                    middle: true,
                    right: false

                };
                $scope.toggleImage = function () {
                    if ($scope.imageSwapUrl === 'images/database-5-16.ico') {
                        $scope.imageSwapUrl = 'images/accept-database-16.ico';
                    } else {
                        $scope.imageSwapUrl = 'images/database-5-16.ico';
                    }
                }




            });
        </script>
    </body>

</html>

当我运行上面的代码时没有加载初始图像文件但是控制台日志中没有显示错误，为什么会这样？

Answer 1

您在javascript中定义了一个控制器ButtonsCtrl，并且从未在您的标记中使用它。所以，控制器内的代码永远不会被调用。

<body ng-controller="ButtonsCtrl">
    .....
</body>

Answer 2

您没有定义控制器定义它

<svg width="300px" height="300px" viewBox="0 0 100 100">
  <path d="m 10,60 
          a 50 50 0 0 1 80,0
          l -10,10
          a 40 40 0 0 0 -60 0Z" stroke-width="1" stroke="#A5423A" fill="none" />
</svg>

工作示例here这不完全是您的代码

ng-src没有加载图片

2 个答案: