获得403禁止当AngularJS动态加载图片 [英] Getting 403 forbidden when dynamically loading images in AngularJS

问题描述

我从我的API，包含我的域名之外包含图片加载JSON数据。我已经做到了这一点，在过去，不与棱角分明，而且我从来没有见过这个问题...

在我的小提琴当我点击搜索两个图像出现，但它们都抛出403严禁转载，不加载。

我想不通为什么会这样。任何想法？

  VAR应用= angular.module（'应用'，[]）;功能的HomeController（$范围）{
    $ scope.search =功能（）{
        $ scope.movi​​es = [
            {标题：黑客帝国，海报：http://ia.media-imdb​​.com/images/M/MV5BMTU4NTczODkwM15BMl5BanBnXkFtZTcwMzEyMTIyMw@@._V1._SY317_.jpg}，
            {标题：重装上阵黑客帝国，海报：http://ia.media-imdb​​.com/images/M/MV5BMTg1NTkxOTk0MV5BMl5BanBnXkFtZTYwODc4MTc4._V1._SY317_.jpg'}
        ];
    };
}
 

解决方案

似乎IMDB正在检查引用者，以便其他各方不允许直接内嵌在其网站上的图像。如果你与其他域的图像尝试，它的工作原理： http://jsfiddle.net/PZJKZ/2/

  VAR应用= angular.module（'应用'，[]）;功能的HomeController（$范围）{
    $ scope.search =功能（）{
        $ scope.movi​​es = [
            {标题：黑客帝国，海报：http://dartr.com/wp-content/uploads/2011/10/javascript-logo.png}，
            {标题：重装上阵黑客帝国，海报：http://wpmu.org/wp-content/uploads/2010/04/jquery-logo1.png'}
        ];
    };
}
 

I am loading json data from my api that contains urls to images outside of my domain. I've done this in the past, not with Angular, and I've never seen this problem...

In my fiddle when I click 'Search' two images appear but they are both throwing a 403 forbidden and do not load.

I can't figure out why this is happening. Any ideas?

var app = angular.module('app', []);

function HomeController($scope) {
    $scope.search = function() {
        $scope.movies = [ 
            { Title: 'The Matrix', Poster: 'http://ia.media-imdb.com/images/M/MV5BMTU4NTczODkwM15BMl5BanBnXkFtZTcwMzEyMTIyMw@@._V1._SY317_.jpg' },
            { Title: 'The Matrix Reloaded', Poster: 'http://ia.media-imdb.com/images/M/MV5BMTg1NTkxOTk0MV5BMl5BanBnXkFtZTYwODc4MTc4._V1._SY317_.jpg' }
        ];
    };
}

解决方案

It seems that imdb is checking the referer so other parties are not allowed to embeded their images directly on their website. If you try with images from other domains, it works: http://jsfiddle.net/PZJKZ/2/

var app = angular.module('app', []);

function HomeController($scope) {
    $scope.search = function() {
        $scope.movies = [ 
            { Title: 'The Matrix', Poster: 'http://dartr.com/wp-content/uploads/2011/10/javascript-logo.png' },
            { Title: 'The Matrix Reloaded', Poster: 'http://wpmu.org/wp-content/uploads/2010/04/jquery-logo1.png' }
        ];
    };
}

这篇关于获得403禁止当AngularJS动态加载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！