unsafe:data:image/jpeg;base64, net::ERR_UNKNOWN_URL_SCHEME in Angular 7

Issue

I am getting image as base64 blob from service and i am binding into view. But i am facing some issue.How can I sanitize the url into trusted url. I have tried with sanitizer but no luck.. please help me out..

html code:

<img src="data:image/jpeg;base64,{{inspectionDetails.reportImage}}" width="100%" height="100%" alt="Image" />

ts code :

this.ImgUrl = this.inspectionDetails.reportImage;
this.base64Image = this._sanitizer.bypassSecurityTrustResourceUrl(this.ImgUrl);

Solution

You need to make this change

this.ImgUrl = 'data:image/png;base64,' + this.inspectionDetails.reportImage;

or

this.ImgUrl = `data:image/png;base64,${{this.inspectionDetails.reportImage}}`;

then Your HTML will be

<img [src]="ImgUrl " width="100%" height="100%" alt="Image" />

this should work

EDIT:

public ImgUrl = ' ';

Answered By - Abhishek Ekaanth