角HTTP：如何调用自定义标题图片吗？ [英] angular http: how to call images with custom headers?

问题描述

在HTML视图，图像显示是这样的：

In the html view, images are displayed like this:

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

element.image.url 指向一个网址，如： / rest_api / IMG / 12345678 。

element.image.url points to an url like: /rest_api/img/12345678.

这是工作的罚款，显示图像。

现在，我想补充的认证：

的用户进行身份验证之前，每一个资源，HTTP错误响应401，图像了。当认证成功时，令牌被放置在自定义首部，并与每$ http请求发送的，在允许访问的资源：

Before the user is authenticated, every resources respond with an http error 401, images too. When authentication succeeds, a token is placed in a custom headers and sent with every $http requests, allowing access the resources:

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

这是载入$资源JSON档案工作的罚款。而是直接链接到的图像仍然401认证之后。

This is working fine for Json files loaded with $resource. But the direct links to the images are still 401 after authentication.

如何调用自定义页眉图像？

或者对我应该怎么做任何建议。

Or any advice on how I should do this.

推荐答案

有一个变化对于简单的答案。您应该使用：角IMG-HTTP-SRC

There is a vary simple answer for that. You should use: angular-img-http-src.

问题：

您使用令牌身份验证的基础和您要为图片来自担保
  路线。

You used token based auth and you need to serve images from secured routes.

解决方案：

使用HTTP-SRC，而不是NG-SRC，它会使用获取的图像
  $ http服务 - 这意味着授权头通过添加拦截器
  将是present - 然后建立一个斑点和Src设置为的ObjectURL

Use http-src instead of ng-src and it will fetch images using the $http service - meaning Authorization headers added via interceptors will be present - then build a Blob and set the src to an objectURL.

它完美对我的项目。

这篇关于角HTTP：如何调用自定义标题图片吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！