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

Question

I am getting image as base64 blob from a service and I am binding into view. But I am facing an issue. How can I sanitize the url into a 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);

Answer 1

Use _sanitizer.bypassSecurityTrustUrl to tell angular src value is safe

You can change your code like below.

Import DomSanitizer

import { DomSanitizer } from '@angular/platform-browser';

Inject this dependency into the constructor

constructor(private domSanitizer: DomSanitizer) { }


myReader.onloadend = (e) => {
     this.base64Image = this.domSanitizer.bypassSecurityTrustUrl(myReader.result);
     console.log(this.base64Image);
   }

Answer 2

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 = ' ';

Answer 3

I have also faced similar kind of issue for video and here's a way how I resolved it. You can set SRC in HTML like mentioned below to resolve unsafe data issue for image/video.

[src]="sanitizer.bypassSecurityTrustResourceUrl(src)"