繁体   English   中英

angular http:如何用自定义标题调用图像?

[英]angular http: how to call images with custom headers?

在html视图中,图像显示如下:

<img ng-src="{{element.image.url}}"> 

element.image.url指向一个URL: /rest_api/img/12345678

这工作正常 ,显示图像。

现在,我添加身份验证:

在对用户进行身份验证之前,每个资源都会响应一个http错误401,图像也是如此。 验证成功后,会将令牌放在自定义标头中,并与每个$ http请求一起发送,以允许访问资源:

$http.defaults.headers.common['Authorization'] = token; 

这适用于加载$ resource的Json文件。 但是在认证之后,到图像的直接链接仍然是401。

如何使用自定义标题调用图像?

或者关于我应该怎么做的任何建议。

如上所述你可以使用angular-img-http-srcbower install --save angular-img-http-src如果你使用Bower )。

如果您查看代码 ,它将使用URL.createObjectURLURL.revokeObjectURL ,它们仍然是2016年4月19日的草稿 。请查看您的浏览器是否支持它

为了使用它,声明'angular.img'作为你的app模块的依赖项( angular.module('myapp', [..., 'angular.img']) ),然后在你的HTML中你可以使用<img>标签的http-src属性。

在您的示例中,它将是: <img http-src="{{element.image.url}}">

当然,这意味着您已使用$httpProvider.interceptors.push声明了一个拦截器来添加您的自定义标头,或者您使用$http.defaults.headers.common.MyHeader = 'some value';每个请求静态设置了标头$http.defaults.headers.common.MyHeader = 'some value';

对此有一个不同的简单答案。 你应该使用: angular-img-http-src

问题:

您使用基于令牌的身份验证,您需要提供来自安全路由的图像。

解:

使用http-src而不是ng-src,它将使用$ http服务获取图像 - 意味着将通过拦截器添加授权标头 - 然后构建一个Blob并将src设置为objectURL。

它完美地适用于我的项目。

我面临同样的问题。 我发现的最佳解决方案是将Authorization令牌作为查询参数传递。

例如 :

<img src="http://myhost.com/image/path?accessToken=123456789" >

这样,您只能为REST使用者保护这些图像。

考虑URL为http://foo.com/bar.png

在你的控制器中,

 angular.module('foo') .controller('fooCtrl', ['$sce', function($sce) { $scope.dataSrc = "http://foo.com/bar.png" $scope.src = $sce.trustAsResourceUrl($scope.dataSrc) } ]) 

在你看来,

 <img ng-src="{{src}}" /> 

..似乎可以做到这一点。

据我所知,不可能传递额外的标头包含资产请求(浏览器在渲染页面时加载的脚本,图像,媒体,CSS文件)。 这一切都由浏览器控制。 只有在发出XHR(AJAX)请求时才能修改标头。

我建议查看您的服务器端身份验证,看看是否有解决方案。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM