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

Question

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

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

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

这工作正常,显示图像.

现在,我添加身份验证:

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

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

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

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

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

Answer 1

如上所述,您可以使用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中使用http-src属性作为<img>标记.

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

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

Answer 2

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

问题:

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

解:

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

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

Answer 3

据我所知，不可能通过资源请求（浏览器在渲染页面时加载的脚本、图像、媒体、CSS 文件）传递附加标头。这一切都是由浏览器控制的。仅当发出 XHR (AJAX) 请求时才能修改标头。

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