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使用bower install --save angular-img-http-src。

如果您查看the code，则会在2016年4月19日URL.createObjectURL使用URL.revokeObjectURL和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';

Answer 2

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

<强>问题：

您使用了基于令牌的身份验证，并且您需要提供来自安全的图像   路由。

<强>解决方案：

使用http-src而不是ng-src，它将使用。来获取图像   $ http服务 - 意味着通过拦截器添加授权标头   将出现 - 然后构建一个Blob并将src设置为objectURL。

它完全适用于我的项目。

Answer 3

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

例如：

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

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

Answer 4

将网址视为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）请求时才能修改标题。

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

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

5 个答案: