我使用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>
2条答案
按热度按时间k5ifujac1#
您应该使用ngSrc来显示其路径由AngularJS代码生成的图像。
当你使用常规的
src标签时，浏览器会尝试加载名为{{thumbnail}}的资源，因为它不知道AngularJS是什么。它看到的只是一个指向{{thumbnail}}的图像。zengzsys2#
使用
ng-src并确保控制器中的路径正确。如果图像的路径不正确，它将在控制台中给予错误。