角 - 從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正在返回一種圖像/ jpeg，但是沒有任何渲染。

編輯：拿出data:image/jpeg;base64以及dee zg的答案是什麼修復它。

Answer 1

在你的HTTP調用你需要的東西像這樣（沒有測試過，從頭部寫）：

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

，將返回你DomString，你可以喂到你的IMG來源。

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>