アンギュラ - API

Question

からレンダリング画像/ JPEGデータ

マイHTTP呼び出し：

return http.get(url).map(res => res.text());

コンポーネント：

httpService.getCustomBanner('path').subscribe(
data => { 
    this.image = 'data:image/jpeg;base64,'+ data 
}) 

HTML：

<div *ngIf = "image"> 
    <img [src]="sanitizer.bypassSecurityTrustUrl(image)"/> 
</div> 

私はすべてのエラーを取得していませんよAPIがimage/jpegのタイプである を返していますが、何もレンダリングされていません。

編集：data:image/jpeg;base64を出して、ディーゼルの答えと一緒にそれを修正しました。あなたがあなたのimg源に供給することができますDomStringを返します

.map(res => res.blob()) 
.map(blob => URL.createObjectURL(blob)) 

：あなたのhttpで

Answer 1

は、あなたがこの（テストしていない、ヘッドからの書き込み）のようなものが必要に呼び出します。

Answer 2

は

import {DomSanitizer} from '@angular/platform-browser'; 
... 
constructor(private sanitizer:DomSanitizer){} 

sanity(url) 
{ 
return this.sanitizer.bypassSecurityTrustUrl(url) 
} 

関数を定義し、あなたが

<div *ngIf = "image"> 
<img [src]="sanity(image)"/> 
</div> 

Answer 3

を使用できるテンプレートにこんにちは[ソース]わからないですが、あなた、あなたのコンポーネントで、次の

を使用してみてください次のコードを使用して動作するかどうかをテストできます。

<div *ngIf = "image"> 
    <img src="{{sanitizer.bypassSecurityTrustUrl(image)}}"/> 
</div>