Как я могу отобразить изображение, закодированное в формате base64 в Angular 6?

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», это может решить вашу проблему.

Пожалуйста, просмотрите этот Fiddle stackbliz.Загляните внутрь компонента приложения, чтобы увидеть реализацию.

StackBlitz

Answer 2

Вы не используете this в HTML-шаблонах в Angular.Все переменные / методы-члены разрешены в классе по умолчанию.Прямой доступ к переменным осуществляется следующим образом:

<img [src]="hello" />