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

我使用NG-REPEAT遍历元素列表，并基于迭代的对象中的字符串加载缩略图图像。Angular尝试将模板表达式作为图像加载

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

这种行为的原因是什么？

<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>

来源

2015-10-19 zxz

我们展示代码，请 –

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

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

来源

2015-10-19 10:48:43

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

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

来源

2015-10-19 10:50:23

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

回答

相关问题