Angular2 - 显示使用REST调用返回的图像

Question

我想显示用户选择的项目的图像。当用户点击某个项目时，会进行休息呼叫并检索图像，但我无法显示该图像。

我尝试过关注here和here的想法，但似乎无法让它们发挥作用。

基本原理（据我的理解）是当其余的调用响应（应该是什么）一个image / png类型时，我可以在我的TS中格式化我的图像源，如下所示：

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

...

this.showPage = "data:image/png;base64," + rest_response;

然后使用＆＃34; DomSanitizer＆＃34;使这个在html中使用如下：

<img [src]="_DomSanitizationService.bypassSecurityTrustUrl(showPage )">

但是当我尝试使用它时，图像被破坏，当我检查它时，我看到：

src="data:image/png;base64,�PNG...,㘑��" etc...

任何和所有帮助或解释为什么会感激。

Answer 1

试试这个：

this.showPage = "data:image/png;base64," + rest_response;

然后简单地说，

<img [src]="showPage" />

正如在此SO question中所回答的那样。