javascript – angular http:如何使用自定义标头调用图像?
作者:互联网
在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).
如果你看the code,它使用的是URL.createObjectURL
和URL.revokeObjectURL
,它们是2016年4月19日的still draft.所以look if your browser supports it.
为了使用它,声明’angular.img’作为你的app模块的依赖项(angular.module(‘myapp’,[…,’angular.img’])),然后在你的HTML中你可以使用< img>的http-src属性标签.
在您的示例中,它将是:< img http-src =“{{element.image.url}}”>
当然,这意味着您已使用$httpProvider.interceptors.push声明了一个interceptor来添加您的自定义标头,或者您使用$http.defaults.headers.common.MyHeader = 'some value';
为每个请求静态设置了标头
标签:javascript,angularjs,authentication,angular-resource 来源: https://codeday.me/bug/20190928/1827989.html