CODEWITHSUNDEEP
htmlangular
Md Enayat
Md Enayat

Reputation: 167

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

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.

Upvotes: 0

Views: 514

Answers (1)

allan
allan

Reputation: 969

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

Upvotes: 2

Related Questions