Question

我使用NG-REPEAT迭代元素列表，并根据我迭代的对象中的字符串加载缩略图。

这很好用，但奇怪的是，在控制台中我得到的错误是找不到名为 {{thumbnail}} 的图片。因此，除了为我的元素获取正确的图像之外，它似乎也尝试将Angular表达式本身加载为图像URL。

这种行为可能是什么原因？

<body>

    <div class="main" ng-app="twitterBox" ng-controller="TwitterBoxController">

        <div class="tweet" ng-repeat="tweet in tweets">
            <div class="tweetHeader">
                <img class="thumbnail" src="{{tweet.thumbnail}}"></img>
                <span class="name">{{tweet.name}}</span><br>
                <span class="handle">{{tweet.handle}}</span><br>
                12 minutes ago
            </div>

            {{tweet.text}}
        </div>


    </div>

    <script src="js/angular.min.js"></script>
    <script>
        var myApp = angular.module('twitterBox',[]);

        myApp.controller('TwitterBoxController', ['$scope', function($scope) {
          $scope.tweets = [
            { name: "Bobby Brown", handle: "@Bobby_Brown44", thumbnail: "images/face.jpg", text: "Hello hello hello! Hello!" },
            { name: "John D. White", handle: "@JohnWhite", thumbnail: "images/face.jpg", text: "Bla bla bla bla!" }
          ];
        }]);

    </script>
</body>

Answer 1

您应该使用ngSrc来显示使用AngularJS代码生成路径的图像。

当您使用常规src标记时，浏览器将尝试加载名为{{thumbnail}}的资源，因为它不知道AngularJS是什么。它看到的只是一张指向{{thumbnail}}的图片。

Answer 2

使用ng-src并确保您的路径在您的控制器中是正确的，如果您的图片路径不正确，它将在控制台上发回错误

<img class="thumbnail" ng-src="{{tweet.thumbnail}}"></img>

Angular尝试将模板表达式加载为图像

2 个答案: