使用Angular 8，尝试在模板文件中显示通过外部API调用接收的图像

Question

我正在使用Angular 8进行开发。我有一种情况，我需要在模板中显示一些图像，并且图像内容来自外部API调用。来自API的Base64响应需要时间，因此我能够在模板中显示图像。请帮助。

Answer 1

您可以将从API接收的图像显示为背景图像。首先，将DomSanitizer插入您的组件中

constructor(private dom: DomSanitizer) 

以及您要设置为背景添加的HTML中的>

[style.background-image]="trustImage('url(' + value + ')')"

现在您需要使用trustImage函数使图像受信任

trustImage(item) {
    return this.dom.bypassSecurityTrustStyle(item);
}

一旦信任图像，它将显示出来。有关更多信息，请参见https://angular.io/api/platform-browser/DomSanitizer