web-dev-qa-db-ja.com

angular http：カスタムヘッダーを使用して画像を呼び出す方法は？

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のままです。

カスタムヘッダーを使用して画像を呼び出す方法は？

または、これをどのように行うべきかについてのアドバイス。

javascriptangularjsauthenticationangular-resource
16
François Romain

前述のように ここ 使用できます angular-img-http-src （ Bower を使用する場合はbower install --save angular-img-http-src）。

コード を見ると、2016年4月19日の URL.createObjectURL と URL.revokeObjectURL が使用されています まだドラフト です。 ブラウザがサポートしているかどうかを確認してください 。

これを使用するには、'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'; を使用してすべてのリクエストに対して静的にヘッダーを設定したことを意味します。

11
Anthony O.

それにはさまざまな簡単な答えがあります。使用する必要があります： angular-img-http-src 。

問題：

トークンベースの認証を使用し、保護されたルートから画像を提供する必要があります。

解決策：

Ng-srcの代わりにhttp-srcを使用すると、$ httpサービスを使用して画像がフェッチされます（インターセプターを介して追加された承認ヘッダーが存在することを意味します）。次に、Blobを構築し、srcをobjectURLに設定します。

それは私のプロジェクトで完璧に機能します。

8
Gal Silberman

私は同じ問題に直面しています。私が見つけた最善の解決策は、Authorizationトークンをクエリパラメーターとして渡すことです。

例えば ​​：

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

このようにして、RESTコンシューマーに対してのみこれらの画像を保護できます。

2
user3435330

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

..トリックを行うようです。

1
Jaipradeesh