CODEWITHSUNDEEP
angularjs
Teknotica
Teknotica

Reputation: 1136

Error message when mapping images source

I'm a newbie with AngularJS. I used it yesterday for the first time (loving it!), so I apology if this is a dumb question.

I'm looping through a set of data called "leagues" mapping my HTML template with no issues. The data for the 3 leagues, including the logo appears correctly, however, the browser console keeps telling me the 3 logos doesn't exist (like the mapping hasn't taken place yet...)

Any ideas why is this happening? Thanks in advance!

Error: 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'}
    ];
}

Upvotes: 0

Views: 113

Answers (1)

mingos
mingos

Reputation: 24502

You should use the ng-src directive instead of the src attribute on your images. The purpose of this directive is addressing precisely the issue you're experiencing.

[EDIT]

As per the question WHY this is happening, the HTML is parsed verbatim (with the curly brackets) before angular.js kicks in and does its magic, making the browser complain about an invalid image url under the src attribute.

Upvotes: 2

Related Questions