[英]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-src ( bower install --save angular-img-http-src
如果你使用Bower )。
如果您查看代码 ,它将使用URL.createObjectURL
和URL.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.