html - How to render byte[] to image in <img> in angular 9

Question

I'm not able to render my byte[] to the image. I found various solutions but till now no one is working for me in Angular 9.

Image model

export class Image {
    id: string
    imageName:  string
    imageData: any
    message: string
}

.ts file

import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
import { Service} from 'src/app/services/Service.service';

constructor(private service: Service, private sanitizer: DomSanitizer) { }

image: Image;
imgRecourse: SafeResourceUrl;

this.service.getImage(imageId).subscribe(
      data => {
        this.image = data as any;
        this.imgRecourse = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' + this.image.imageData);
      }
    )

HTML

<div class="picture" *ngIf="imgRecourse">
   <img id="img" src="{{imgRecourse}}">
</div>

and it's showing me one warning in every solution which is

core.js:6901 WARNING: sanitizing unsafe URL value SafeValue must use [property]=binding: data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAQ4B4ADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAEC...

Please help me out

Thanks.

question from:https://stackoverflow.com/questions/65937668/how-to-render-byte-to-image-in-img-in-angular-9

Answer 1

 <div class="picture" *ngIf="imgRecourse">
     <img id="img" [src]="imgRecourse">
  </div>