title: How can I display image encoded in base64 format in Angular 6?
body: <p>I struggle with a problem associated with Angular 6 and displaying image encoded in base64 format. Any ideas why code shown below doesn't display image?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows"&gt;
  &lt;img src="{{this.hello}}" /&gt;
  </code></pre>
  
  <p>ts:</p>
  
  <pre><code>this.hello = "data:image/png;base64, /9j/4AAQSkZJRgABAQAAA..."
  </code></pre>
  
  <p>While code shown below works properly and displays picture?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows"&gt;
  &lt;!--&lt;img src="data:image/png;base64, /9j/4AAQSkZJRgABAQAAA..."/&gt;
  </code></pre>
  
  <p><code>this.hello</code> is assigned in the constructor just for test purpose. I create it in this way <code>this.hello = 'data:image/png;base64, ' + this.UploaderService.imageRecognitionRowsData[0].toString()</code> My main goal is to display <code>imageRecognitionRowsData</code> in this loop <code>&lt;tr *ngFor="let row of this.UploaderService.tableImageRecognition.dataRows"&gt;</code>. So for first iteration I would display image <code>imageRecognitionRowsData[0]</code> then during next iteration image <code>imageRecognitionRowsData[1]</code> etc. The length of <code>this.UploaderService.tableImageRecognition.dataRows</code> is always the same as <code>this.UploaderService.imageRecognitionRowsData</code> When I add <code>&lt;p&gt;{{this.hello}}&lt;/p&gt;</code> I get the same string in html.
  I have no idea what is wrong. I tried also with <code>this.hello2 = this.sanitizer.bypassSecurityTrustResourceUrl(this.hello);</code>, <code>this.hello2 = this.sanitizer.bypassSecurityTrustUrl(this.hello);</code>, <code>&lt;img [src]="this.hello" /&gt;</code> etc. but nothing works. Any ideas how to solve this?</p>