WARNING: sanitizing unsafe URL value data:text/html;base64,

Question

I am getting a response from the server in the form of image, which I am accepting as a blob and converting it to image

template:

<img  [src]="imgSrc"  alt="Loading....">

ts file:

createImageFromBlob(image: Blob) {
     let reader = new FileReader();
     reader.addEventListener("load", () => {
    

      this.imgSrc=reader.result;
     }, false);
  
     if (image) {
        reader.readAsDataURL(image);
     }
  }

this.createImageFromBlob(data) //data is the response from the server

It is giving me WARNING: sanitizing unsafe URL value data:text/html;base64.

Using DomSanitizer bypassSecurityTrust gives the error of argument String | ArrayBuffer not assignable to type string

createImageFromBlob(image: Blob) {
     let reader = new FileReader();
     reader.addEventListener("load", () => {
    

      this.imgSrc=this.sanitizer.bypassSecurityTrustResourceUrl(reader.result); //error here
     }, false);
  
     if (image) {
        reader.readAsDataURL(image);
     }
  }

How can I bypass angular security in case of blob to Image

Solution: The problem was in the reader.result, it was not giving a valid image, so I had to fetch the image as an array-buffer in the back-end and then send it to the front-end in order to get the correct image.

Actually my backend is first fetching the image from another site and then sending it to the frontend.

Answer 1

If your image is in base64 format you could bind directly to src of image.

<img [src]="your-base64-image-filed"/>

in your code maybe a thing missed like mime type. are you sure that reader.result is a valid image?

Answer 2

Try to use the sanitizer conversion to HTML as below.

<img [src]="!='' ? _sanitizer.bypassSecurityTrustResourceUrl(croppedImage) : '/assets/images/default-profile.jpg'" alt="Image Preview"/>