javascript angular http：如何使用自定义标题调用图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21613534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular http: how to call images with custom headers?
提问by Fran?ois Romain
In the html view, images are displayed like this:
在 html 视图中，图像显示如下：
<img ng-src="{{element.image.url}}">
element.image.urlpoints to an url like: /rest_api/img/12345678.
element.image.url指向一个网址，如：/rest_api/img/12345678。
This is working fine, images are displayed.
这工作正常，显示图像。
Now, I add authentication:
现在，我添加身份验证：
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 错误 401 响应，图像也是如此。当身份验证成功时，一个令牌被放置在一个自定义标头中，并与每个 $http 请求一起发送，允许访问资源：
$http.defaults.headers.common['Authorization'] = token;
This is working fine for Json files loaded with $resource. But the direct links to the images are still 401 after authentication.
这适用于加载了 $resource 的 Json 文件。但是图片的直接链接认证后还是401。
How to call the images with custom headers?
如何使用自定义标题调用图像？
Or any advice on how I should do this.
或者关于我应该如何做到这一点的任何建议。
回答by Anthony O.
As said hereyou can use angular-img-http-src(bower install --save angular-img-http-srcif you use Bower).
正如这里所说，您可以使用angular-img-http-src（bower install --save angular-img-http-src如果您使用Bower）。
If you look at the code, it uses URL.createObjectURLand URL.revokeObjectURLwhich are still drafton 19 April 2016. So look if your browser supports it.
如果你看一下代码，它使用了URL.createObjectURL和URL.revokeObjectURL其仍然起草于2016年4月19日因此，如果您的浏览器支持它的样子。
In order to use it, declare 'angular.img'as a dependency to your app module (angular.module('myapp', [..., 'angular.img'])), and then in your HTML you can use http-srcattribute for <img>tag.
为了使用它，将其声明'angular.img'为对您的应用程序模块 ( angular.module('myapp', [..., 'angular.img']))的依赖项，然后在您的 HTML 中您可以使用标签的http-src属性<img>。
In your example it would be: <img http-src="{{element.image.url}}">
在您的示例中，它将是： <img http-src="{{element.image.url}}">
Of course, this implies that you have declared an interceptorusing $httpProvider.interceptors.pushto add your custom header or that you've set statically your header for every requests using $http.defaults.headers.common.MyHeader = 'some value';
当然，这意味着您已经声明了一个拦截器，$httpProvider.interceptors.push用于添加自定义标头，或者您已经为每个请求静态设置了标头$http.defaults.headers.common.MyHeader = 'some value';
回答by Gal Silberman
There is a vary simple answer for that. You should use: angular-img-http-src.
对此有一个不同的简单答案。您应该使用：angular-img-http-src。
Problem:
You used token based auth and you need to serve images from secured routes.
Solution:
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-src 而不是 ng-src，它将使用 $http 服务获取图像 - 这意味着将存在通过拦截器添加的授权标头 - 然后构建一个 Blob 并将 src 设置为 objectURL。
It works perfectly on my project.
它完美地适用于我的项目。
回答by user3435330
I am facing the same problem. The best solution I found is passing the Authorization token as a query parameter.
我面临同样的问题。我找到的最佳解决方案是将授权令牌作为查询参数传递。
For example :
例如 ：
<img src="http://myhost.com/image/path?accessToken=123456789" >
This way you can secure those images only for your REST consumers.
通过这种方式，您可以仅为您的 REST 使用者保护这些图像。
回答by Jaipradeesh
Consider the URL be http://foo.com/bar.png
考虑 URL 是 http://foo.com/bar.png
In your controller,
在您的控制器中，
angular.module('foo')
.controller('fooCtrl', ['$sce',
function($sce) {
$scope.dataSrc = "http://foo.com/bar.png"
$scope.src = $sce.trustAsResourceUrl($scope.dataSrc)
}
])And in your view,
而在你看来，
<img ng-src="{{src}}" />.. seems to do the trick.
.. 似乎可以解决问题。
回答by Cuong Vo
As far as I know it's not possible to pass additional headers with asset requests (scripts, images, media, CSS files that the browser loads while rendering the page). That's all controlled by the browser. Only when making a XHR (AJAX) request can you modify headers.
据我所知，不可能通过资产请求（脚本、图像、媒体、浏览器在呈现页面时加载的 CSS 文件）传递额外的标头。这一切都由浏览器控制。只有在发出 XHR (AJAX) 请求时才能修改标头。
I would suggest looking at your server side authentication and seeing if there's a solution there.
我建议查看您的服务器端身份验证，看看那里是否有解决方案。
