AngularJS GET 404 nicht gefunden

Question

Momentan wird an einer Angular JS-Fernsehanwendung gearbeitet. Die App ruft Daten von einem API-Anruf ab. Ich versuche, die Bilder aus dem Ergebnis-Array zu erhalten.

Hier ist der Code für die mainController.js ist

app.controller("mainController", function($scope, $http){ 
    $scope.apiKey = "b3e2e6f87d3aeec3075668a1bd4a78e2"; 
    $scope.init = function(){ 
     //api call requires format, apiKey, date, and days 
     var today = new Date(); 
     //format apiDate according to the api specifications 
     var apiDate = today.getFullYear() + ("0" + (today.getMonth()+1)) + today.getDate(); 
     $scope.results = []; 
     console.log(apiDate); 
     $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function (data){ 
      //connection successful 
      //console.log(data); 
      angular.forEach(data, function (value, index){ 
       var date = value.date;//stores the date of the tv shows 
       angular.forEach(value.episodes, function (tvshow, index){ 
        //this adds the locally store date to the tvshow object 
        tvshow.date = date; 
        $scope.results.push(tvshow); 
       });//end 2nd for each 
      });//end 1st for each 
     }).error(function (error){ 
      //connection failed 
     }); 
    }; 
}); 

Hier ist der Code für die index.html

<ul class="episode-list"> 
     <li ng-repeat="tvshow in results"> 
      <div class="row-fluid"> 
      <div class="span3"> 
       <img src="{{tvshow.episode.images.screen}}"/> 
      </div> 
     </div> 
     </li> 
    </ul> 

Die Konsole die folgenden Fehler zurückgibt:

GET: // localhost /tvApp/%7B%7Btvshow.episode.images.screen%7D%7D 404 (nicht gefunden) localhost /: 29

GET //localhost/tvApp/%7B%7Btvshow.episode.images.screen%7D%7D 404 (nicht gefunden) angular.min.js: 20

Ich bin nicht ganz sicher, warum dies geschieht. Jede Hilfe wäre zu schätzen. Ich habe nach einem ähnlichen Problem aber keinen Erfolg gesucht

Answer 1

Verwenden ng-src anstelle von src:

<img ng-src="{{tvshow.episode.images.screen}}"> 

Dies verhindert, dass das Bild aus geladen werden, bevor die Winkel Markup durch AngularJS verarbeitet wird. Mit src wird die literale URL http://www.mydomain.com/{{tvshow.episode.images.screen}} geladen.

Answer 2

Überprüfen Sie, um sicherzustellen, dass Ihr Erfolg Callback tatsächlich auslöst.

Überprüfen Sie, um sicherzustellen, dass Ihre TV-Show Episoden enthält, die Bilder enthält, die Bildschirm enthält. Keine Rechtschreibfehler?