Issue
I'm iterating over a list of elements with NG-REPEAT, and loading a thumbnail image based on a string in the objects over which I iterate.
This works fine, but the curious thing is that in the console I get the error that the image called {{thumbnail}} couldn't be found. So in addition to fetching the correct images for my elements, it also seems to try to load the Angular expression itself as an image URL as well.
What could be the reason for this behavior?
<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>
Solution
You should use ngSrc to display images whose path is generated with AngularJS code.
When you use the regular src tag the browser will try to load the resource called {{thumbnail}} because it doesn't know what AngularJS is. All it sees is an image pointing to {{thumbnail}}.
Answered By - Ricardo Velhote
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.