编程语言
首页 > 编程语言> > javascript – angular http:如何使用自定义标头调用图像?

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.createObjectURLURL.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