Angular2とNPMを使用してBearer Authorizationで画像を非同期に読み込む方法

Question

Angular2を使用している最近のソリューションを探しています。私はイメージのリストを持っているので、私のテンプレートでは、私が行います

<div *ngFor="let myImg of myImages"> 
    <img src="{{myImg}}" /> 
</div> 

myImagesが私component.tsにロードされた配列です：

myImages: string[] = new Array(); 

これはポストマンと私はAPIの呼び出しです後でモデル化しようとしています：

angular2でこれを行うにはどうすればよいですか？

Answer 1

ブラウザでは通常、img要素に認証ヘッダーを設定することは通常できませんので、これを行う方法はありません。

httpサービスを使用して別のhttpリクエストでイメージを取得し、その値で後でソースを設定することをお勧めします。

レスポンスは画像base64でエンコードされているので、imgタグのソースとして設定することができますが、クライアント側でバイナリをbase64に変換する方法があります。