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

新手上路,请多包涵

我正在努力解决与 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"> 。 So for first iteration I would display image imageRecognitionRowsData[0] then during next iteration image imageRecognitionRowsData[1] etc. The length of this.UploaderService.tableImageRecognition.dataRows is always the same as 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" /> 等,但没有任何效果。任何想法如何解决这个问题?

原文由 thedbogh 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.1k
2 个回答

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

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

堆栈闪电战

原文由 Richang Sharma 发布,翻译遵循 CC BY-SA 4.0 许可协议

在处理 base64 图像时,这对我有用。

HTML:

 <img [src]="currVerifiedLoanOfficerPhoto">

零件:

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

原文由 Jason Spence 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题