angular http：如何使用自定义标题调用图像？答案

【问题标题】：angular http: how to call images with custom headers?angular http：如何使用自定义标题调用图像？
【发布时间】：2014-02-06 20:37:23
【问题描述】：

在 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。

如何调用带有自定义标题的图片？

或者关于我应该如何做到这一点的任何建议。

【问题讨论】：

你是如何处理认证服务器端的？是 cookie / sessionId 吗？基本认证？据我所知，您不能为非 XHR 请求（脚本、CSS、图像、视频等）附加自定义标头。这些由浏览器处理，您可以在每个请求之前/之后以编程方式控制您的用户代理标头，但与这些请求一起传递的唯一数据包括基本数据和 cookie。
服务器端由 Ez publsih rest Api 处理。有两个 cookie：PHPSESSID 和 eZSESSID 以及一个由 angular 处理的令牌 (OAUTH)。你的意思是如果定义了会话cookie，那么图像调用应该可以工作？
我不知道 Ez Publish 是如何工作的，但是是的，这个想法是后端将处理身份验证并在验证 sessionId 后返回图像。您的图像与您进行身份验证的任何内容都在同一主机上吗？
是的，图片在同一个主机上。
您是否有理由首先要保护静态资源？也许只是按原样提供来自后端的图像（不需要身份验证）。

标签： javascript angularjs authentication angular-resource

【解决方案1】：

如here 所说，您可以使用angular-img-http-src（如果您使用Bower，则为bower install --save angular-img-http-src）。

如果您查看the code，它使用URL.createObjectURL 和URL.revokeObjectURL，它们是2016 年4 月19 日的still draft。所以look if your browser supports it。

为了使用它，请将'angular.img' 声明为对您的应用模块（angular.module('myapp', [..., 'angular.img'])）的依赖，然后在您的HTML 中，您可以使用http-src 属性作为<img> 标签。

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

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

【讨论】：

感谢您的帮助！浏览器兼容性链接、示例和声明提示。 5 星！
是的，我们需要一种方法来投票 +10，超级简单的问题，特别是如果您的资源是从托管在另一个域上的服务提供的。

【解决方案2】：

对此有一个不同的简单答案。您应该使用：angular-img-http-src。

问题：

您使用了基于令牌的身份验证，并且您需要提供来自受保护的图像路线。

解决方案：

使用 http-src 而不是 ng-src，它将使用 $http 服务 - 表示通过拦截器添加的授权标头将出现 - 然后构建一个 Blob 并将 src 设置为 objectURL。

它在我的项目上完美运行。

【讨论】：

【解决方案3】：

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

例如：

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

通过这种方式，您可以仅为 REST 使用者保护这些图像。

【讨论】：

非常务实的做法

【解决方案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)
    }
  ])

在你看来，

&lt;img ng-src="{{src}}" /&gt;

.. 似乎可以解决问题。

【讨论】：

@jayM 如果解决了您的问题，请将答案标记为正确。

【解决方案5】：

据我所知，无法通过资产请求（浏览器在呈现页面时加载的脚本、图像、媒体、CSS 文件）传递额外的标头。这一切都由浏览器控制。只有在发出 XHR (AJAX) 请求时才能修改标头。

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

【讨论】：

来自mozilla's MDN：您可以将自己的 HTTP 标头添加到应用程序发出的任何请求 [...] 内容中的元素...
@desgnl - 该解决方案需要提升权限才能访问 XPCOM 接口 - 这是网页所没有的。