Скрипт самостоятельно делает неверный запрос (JS - TheMovieDb api)

0

Я пытаюсь сделать простое веб-приложение с помощью 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() {

            },

...

Спасибо всем за ваше время!

Теги:
request

1 ответ

0
Лучший ответ

Вы должны изменить свой тег img, чтобы он выглядел следующим образом:

<img id="homeThumbnailImg" ng-src="{{imageBaseUrl}}/{{movie.poster_path}}"></img>

Обратите внимание на атрибут ng-src который заменяет атрибут src. Это предотвратит попытку браузера получить литеральную строку {{imageBaseUrl}}/{{movie.poster_path}} до того, как угловое имеет шанс оценить это выражение.

  • 0
    Это решило, спасибо :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню