how to remove "unsafe" added to img src

Question

I'm using Angular data binding on img src so my code is

<img src="{{ baseURL + dish.image }}">

and the result is in the page

<img  src="unsafe: http://localhost:3000/images/zucchipakoda.png">

I want to remove the "unsafe:" to let the image show.

the result i got

Answer 1

please inject DomSanitizationService in constructor

example :

constructor( private dom: DomSanitizationService) {}
photoURL(imageUrl) {
  return this.dom.bypassSecurityTrustUrl(imageUrl);
}

OR without function photoUrl u can try it

<img src="dom.bypassSecurityTrustUrl(imageUrl)"/>

note : DomSanitizer for(angular7+) and DomSanitizationService (angular2+)