Question

我是AngularJS的新手。我昨天第一次使用它（爱它！），所以如果这是一个愚蠢的问题，我道歉。

我正在遍历一组名为“联盟”的数据，这些数据映射我的HTML模板没有任何问题。 3个联赛的数据，包括徽标显示正确，但是，浏览器控制台一直告诉我3个徽标不存在（就像尚未发生映射...）

任何想法为什么会发生这种情况？提前谢谢！

错误： enter image description here

HTML：

<!doctype html>
<html ng-app id="ng-app">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <script src="js/angular.min.js"></script>
      <script src="js/app.js"></script>
  </head>

  <body>
      <div id="choose-league" class="section row">
        <div ng-repeat="league in leagues">
            <div class="col-md-4 league" ng-click="getTeams(league.abbr)">
                <img id="{{league.id}}" src="{{league.logo}}" alt="{{league.id}}">
            </div>
        </div>                
      </div>  
  </body>
</html>

JavaScript（AngularJS）：

function dataController ($scope) {

    // Set of leagues we want data from
    $scope.leagues = [
      {id: 'champions', abbr: 'uefa.champions', logo: '/img/champions-logo.png'},
      {id: 'liga', abbr: 'esp.1', logo: '/img/liga-logo.png'},
      {id: 'premier', abbr: 'eng.1', logo: '/img/premier-logo.png'}
    ];
}

Answer 1

您应该在图片上使用ng-src指令而不是src属性。该指令的目的是准确解决您遇到的问题。

[编辑]

根据问题为什么会发生这种情况，在angular.js开始使用之前，会逐字解析HTML（使用大括号），并使其发挥作用，使浏览器在src下抱怨无效的图片网址属性。

映射图像源时出现错误消息

1 个答案: