Question

我正在学习AngularJS。在我的应用程序中，我想显示从http://www.omdbapi.com获得的电影海报。

HTML

<div ng-app="moviesBrowserApp">
        <div ng-controller="moviesCtrl">
            <strong>{{movie.Title}}</strong>
            <div><img alt="{{movie.Title}}" ng-src="movie.Poster" /></div>
        </div>
    </div>

的Javascript

var moviesApp = angular.module('moviesBrowserApp', []);
moviesApp.controller('moviesCtrl', function ($scope, $http) {
    $http.get('http://www.omdbapi.com/?i=tt0112462&plot=short&r=json').success(function (data) {
        $scope.movie = data;
    });
});

问题是使用json结果中的url无法显示图像。当我检查流量时，我看到每个图像的403状态，但如果这些图像是通过浏览器直接查看的，那么它们会在页面重新加载后正确显示。似乎它只能从浏览器的缓存中检索图像。是来自omdbapi.com的权限限制还是什么？有没有办法解决这个问题？

Answer 1

假设movie.Poster在返回时有一个有效的图片网址 - 请使用ng-src：

<img alt="{{movie.Title}}" ng-src="movie.Poster" />

Answer 2

如果您的JSON对象如下所示：

{
    "Title": "Your Title",
    "Poster": "http://www.omdbapi.com/src/poster.jpg" 
}

你必须像这样绑定HTML：

<img ng-src="{{movie.Poster}}" alt="{{movie.Title}}">

我读过一篇非常好的帖子here，我遇到了图片网址损坏的问题，这篇文章对我有所帮助。希望它对你也有帮助。

Answer 3

我离开这个项目一段时间然后我回来玩它并且现在按预期工作。 omdbapi.com已启用权限，因此我不再获得403。

Angular无法显示OMDBAPI中的图像

3 个答案: