如何在 Angular 6 中显示以 base64 格式编码的图像？

Question

我正在努力解决与 Angular 6 相关的问题并显示以 base64 格式编码的图像。任何想法为什么下面显示的代码不显示图像？

html：

<tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">
<img src="{{this.hello}}" />

ts：

this.hello = "data:image/png;base64, /9j/4AAQSkZJRgABAQAAA..."

虽然下面显示的代码可以正常工作并显示图片？

html：

<tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">
<!--<img src="data:image/png;base64, /9j/4AAQSkZJRgABAQAAA..."/>

this.hello在构造函数中分配只是为了测试目的。我以这种方式创建它this.hello = 'data:image/png;base64, ' + this.UploaderService.imageRecognitionRowsData[0].toString()我的主要目标是imageRecognitionRowsData在这个循环中显示<tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows">。因此，对于第一次迭代，我将显示图像，imageRecognitionRowsData[0]然后在下一次迭代图像imageRecognitionRowsData[1]等期间显示图像。的长度this.UploaderService.tableImageRecognition.dataRows始终与this.UploaderService.imageRecognitionRowsData添加时相同，我<p>{{this.hello}}</p>在 html 中得到相同的字符串。我不知道出了什么问题。我也试图与this.hello2 = this.sanitizer.bypassSecurityTrustResourceUrl(this.hello);，this.hello2 = this.sanitizer.bypassSecurityTrustUrl(this.hello);，<img [src]="this.hello" />等但没有任何工程。任何想法如何解决这个问题？

Answer 1

您不使用“this”来引用组件“ts”文件中定义的变量。删除“this”可能会解决您的问题。

请查看此 stackbliz Fiddle。查看应用程序组件内部以查看实现。

闪电战

Answer 2

这就是使用 base64 图像时对我有用的方法。

HTML：

<img [src]="currVerifiedLoanOfficerPhoto">

成分：

this.currVerifiedLoanOfficerPhoto = 'data:image/jpg;base64,' + (this.sanitizer.bypassSecurityTrustResourceUrl(item) as any).changingThisBreaksApplicationSecurity;