7

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?

html:

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

ts:

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

While code shown below works properly and displays picture?

html:

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

this.hello is assigned in the constructor just for test purpose. I create it in this way this.hello = 'data:image/png;base64, ' + this.UploaderService.imageRecognitionRowsData[0].toString() My main goal is to display imageRecognitionRowsData in this loop <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 When I add <p>{{this.hello}}</p> I get the same string in html. I have no idea what is wrong. I tried also with this.hello2 = this.sanitizer.bypassSecurityTrustResourceUrl(this.hello);, this.hello2 = this.sanitizer.bypassSecurityTrustUrl(this.hello);, <img [src]="this.hello" /> etc. but nothing works. Any ideas how to solve this?

thedbogh
  • 614
  • 2
  • 10
  • 26

5 Answers5

11

You don't use "this" to refer the variables defined in the component "ts" file. Remove "this" may solve your problem.

Please Review this stackbliz Fiddle. Look inside the app component to see the implementation.

StackBlitz

Richang Sharma
  • 442
  • 3
  • 6
  • I get warnings `WARNING: sanitizing unsafe URL value data:image/png;base64, /9j/4AAQSkZJRgABAQAAA` and error `Failed to load resource: unsupported URL` – thedbogh Feb 03 '19 at 07:54
  • Yes, it is a browser security warning, please follow this link to resolve the issue https://stackoverflow.com/questions/38593515/warning-sanitizing-unsafe-style-value-url – Richang Sharma Feb 03 '19 at 13:13
  • I tried everything - displaying it as a `string`, as a `SafeResourceUrl` variable, I tried to use `bypassSecurityTrustUrl`,`bypassSecurityTrustStyle`, `this.sanitizer.bypassSecurityTrustStyle(`url(${this.UploaderService.test})`);`, I tried different ways of displaying this in HTML: `, ` also with test variable. I have no idea what else can I try. If you have any suggestions just write and I will test it. I struggle with this problem for a very long time. – thedbogh Feb 03 '19 at 15:16
  • can you post one of the base64 url for me? So that I can reproduce this? – Richang Sharma Feb 03 '19 at 18:11
  • Do you mean my image encoded in base64 that I have in a hello2 variable? – thedbogh Feb 03 '19 at 18:15
  • Yes, because I am not able to reproduce it. – Richang Sharma Feb 03 '19 at 18:16
  • Guess I have resolved it, I have update the stackblitz, please follow the link to see the solution. https://stackblitz.com/edit/angular-g9n9np – Richang Sharma Feb 03 '19 at 18:42
9

This is what worked for me when working with base64 images.

HTML:

<img [src]="currVerifiedLoanOfficerPhoto">

Component:

this.currVerifiedLoanOfficerPhoto = 'data:image/jpg;base64,' + (this.sanitizer.bypassSecurityTrustResourceUrl(item) as any).changingThisBreaksApplicationSecurity;
Jason Spence
  • 472
  • 5
  • 16
1

You don't use this in html templates in Angular. All the variables/member methods are resolved on class by default. Access the variables directly as follows:

<img [src]="hello" />
Peter
  • 10,492
  • 21
  • 82
  • 132
  • The image is still not displayed. – thedbogh Feb 03 '19 at 06:36
  • there must be other issues as well. Debug your logic. – Peter Feb 03 '19 at 06:37
  • I get `Failed to load resource: the server responded with a status of 404 (Not Found)` `http://localhost:4200/hello` but I am sure that I don't send request to `http://localhost:4200/hello`. Any ideas? – thedbogh Feb 03 '19 at 06:59
1

It does not require any additional transformations. It is as simples as adding the src directives for base64:

<img
  [src]="'data:image/jpeg;base64,' + imageAsBase64"
/>

Assuming you have the imageAsBase64 variable on the .ts file.

Gabriel Messas
  • 159
  • 1
  • 5
0
convertToImage() {
const img = new Image();
img.src = `data:image/jpeg;base64,${image}`;
this.imageUrl = img.src;}

Pass your base64 code in the image variable

Ayoseun Francis Solomon
  • 1
  • 2