Я пытаюсь сделать простое веб-приложение с помощью TMDB api, но у меня возникают проблемы с некоторым запросом. Я успешно подключаюсь к его api и получаю все необходимые данные и хорошо отображаю их. Проблема в том, что когда я загружаю свою домашнюю страницу, у которой есть poster_path фильма, я получаю все плакаты красиво и отображается, но в хром-инструментах для разработчиков я вижу, что еще один дополнительный запрос отправлен (не отправлен мной... по крайней мере, не специально) и его провал и разрушение моего приложения.
В Chrome отображаются следующие данные для плохого запроса: GET файл:///C: /Users/Ivan/Documents/testProject/fmdb-fjume-movie-database/app/%7B%7BimageBaseUrl%7D%7D/%7B%7Bmovie.poster_path% 7D% 7D net :: ERR_FILE_NOT_FOUND
Статус: сбой Инициатор: другой
Здесь мой код для получения информации и html:
Домашний вид
<div class="well main-frame">
<h1>MY MOVIE DATABASE</h1>
<div class="row row-centered">
<div class="col-sm-2 col-centered" style="text-align:center;" ng-repeat="movie in movies | limitTo:2">
<img id="homeThumbnailImg" src="{{imageBaseUrl}}/{{movie.poster_path}}"></img>
<a href="#/movies/{{movie.id}}">{{movie.original_title}}</a>
</div>
</div>
</div>
Домашний контроллер
'use strict';
angular.module('home', ['services'])
.controller('homeCtrl', ['$scope', '$q', 'api', 'globals', function($scope, $q, api, globals) {
$scope.imageBaseUrl = globals.getImageBaseUrl();
$scope.getData = function() {
$q.all([
api.discover('movie')
]).then(
function(data) {
$scope.movies = data[0].data.results;
//console.log(data[0].data.results);
},
function(reason) {
console.log(reason);
});
}
$scope.getData();
}]);
API
'use strict';
angular.module('services', [])
.constant('baseUrl', 'http://api.themoviedb.org/3/')
.constant('apiKey', 'myKey...')
.factory('api', function($http, apiKey, baseUrl) {
return {
discover: function(category) {
var url = baseUrl + 'discover/' + category + '?certification_country=US&certification.lte=G&sort_by=popularity.desc&api_key=' + apiKey;
return $http.get(url).success(function(data) {
return data;
});
},
search: function() {
},
...
Спасибо всем за ваше время!
Вы должны изменить свой тег img, чтобы он выглядел следующим образом:
<img id="homeThumbnailImg" ng-src="{{imageBaseUrl}}/{{movie.poster_path}}"></img>
Обратите внимание на атрибут ng-src
который заменяет атрибут src
. Это предотвратит попытку браузера получить литеральную строку {{imageBaseUrl}}/{{movie.poster_path}}
до того, как угловое имеет шанс оценить это выражение.