SafeValue must use [property]=binding, but IT IS

Question

Hello all, this is driving me nuts. I tried all the fixes I was able to find online and nothing seems to work.

I am loading the base64 image info from a DB, which returns the base64 encoded image, like this:

/9j/4AAQSkZJRgABAQEBLAEsAAD/4UHuRXhpZgAATU0AKgAAAAgABgEaAAUAAAABAAAAVgEbAAUAAAABAAAAXgEoAAMAAAABAAIAAAITAAMAAAABAAEAAIdpAAQAAAABAAAIcuocAAcAAAgMAAAAZgAAEOQAAAEsAAAAAQAAASwAAAABHOoAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA...

Then in my TS file I have the following function:

photo_url(data:string){

     this.user_photo = this.domSanitizer.bypassSecurityTrustResourceUrl('data:image/jpeg;base64,' + data).toString();

}

My HTML file looks as follows:

<img [src]="user_photo ? user_photo : 'assets/img/default.png'">

However I am getting the following error and the image is not displaying:

WARNING: sanitizing unsafe URL value SafeValue must use [property]=binding: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/4UHuRXhpZgAATU0AKgAAAAgABgEaAAUAAAABAAAAVgEbAAUAAAABAAAAXgEoAAMAAAABAAIAAAITAAMAAAABAAEAAIdpAAQAAAABAAAIcuocAAcAAAgMAAAAZgAAEOQAAAEsAAAAAQAAASwAAAABHOoAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA...

Error says sanitizer should uses property binding, and it is, but it is still showing that error and the image does not display.

Am I missing something here?

Thanks!

Answer 1

When you use .toString you are setting user_photo to a string instead of a SafeResourceUrl as required.

Actually simply removing the .toString() will make this work properly. Otherwise you are essentially just undoing the work of the DomSanitizer.

user_photo: SafeResourceUrl;
photo_url(data: string){
     this.user_photo = this.domSanitizer.bypassSecurityTrustResourceUrl(
       'data:image/jpeg;base64,' + data);
}