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

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.

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?