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

正如所说的here你可以使用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中你可以使用http-src标签的<img>属性。

在你的例子中，它将是：<img http-src="{{element.image.url}}">

当然，这意味着您已经使用interceptor声明了$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

我面临同样的问题。我发现的最佳解决方案是将Authorization令牌作为查询参数传递。

例如 ：

<img src="http://myhost.com/image/path?accessToken=123456789" >

这样，您只能为REST使用者保护这些图像。

Answer 4

考虑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}}" />

..似乎可以做到这一点。

Answer 5

据我所知，不可能传递额外的标头包含资产请求（浏览器在渲染页面时加载的脚本，图像，媒体，CSS文件）。这一切都由浏览器控制。只有在发出XHR（AJAX）请求时才能修改标头。

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