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

Question

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

我已尝试遵循 here 和 here 的想法，但似乎无法让它们发挥作用。

基本原则（据我所知）是，当其余调用响应（应该是）图像/png 类型时，我可以像这样在我的 TS 中格式化我的图像源：

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

...

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

然后使用 "DomSanitizer" 使其能够在 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 中回答的那样。