脚本自己发出错误的请求(JS - TheMovieDb api)

Script makes bad request on its own (JS - TheMovieDb api)

本文关键字：JS TheMovieDb api 请求 自己 出错 错误 脚本      更新时间：2023-09-26

我试图使用TMDB api制作简单的web应用程序，但我遇到了一些请求的麻烦。我成功地连接到它的api，并获得所有需要的数据，并很好地显示它。问题是，当我加载我的主页，其中有电影的poster_path，我得到所有海报很好地显示，但在chrome开发工具，我可以看到有一个额外的请求发送(不是由我发送…至少不是故意的)，它失败了，破坏了我的应用程序。

Chrome显示以下错误请求:得到文件:///C:/用户/Ivan/文件/testProject/fmdb-fjume-movie-database/app/% 7 b % 7 bimagebaseurl % 7 d % 7 d/% 7 b % 7 bmovie。poster_path % 7 d % 7 d 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属性。这将防止浏览器在angular有机会对字符串{{imageBaseUrl}}/{{movie.poster_path}}进行求值之前试图获取该字符串。

相关文章：