angular http：如何用自定義標題調用圖像？

Question

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

如何使用自定義標題調用圖像？

或者關於我應該怎么做的任何建議。

Answer 1

如上所述，你可以使用angular-img-http-src （ bower install --save angular-img-http-src如果你使用Bower ）。

如果您查看代碼 ，它將使用URL.createObjectURL和URL.revokeObjectURL ，它們仍然是2016年4月19日的草稿 。請查看您的瀏覽器是否支持它 。

為了使用它，聲明'angular.img'作為你的app模塊的依賴項（ angular.module('myapp', [..., 'angular.img']) ），然后在你的HTML中你可以使用<img>標簽的http-src屬性。

在您的示例中，它將是： <img http-src="{{element.image.url}}">

當然，這意味着您已使用$httpProvider.interceptors.push聲明了一個攔截器來添加您的自定義標頭，或者您使用$http.defaults.headers.common.MyHeader = 'some value';每個請求靜態設置了標頭$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）請求時才能修改標頭。

我建議查看您的服務器端身份驗證，看看是否有解決方案。