角-“ changingThisBreaksApplicationSecurity”给出了ts错误“类型'SafeUrl'上不存在属性'changingThisBreaksApplicationSecurity'。”

Question

In my app I am displaying an image in this way-

loadProfileImage(userID){
    this.settingsService.getProfileImage(userID).subscribe((data) =>{
        if (data){
            this.profileImage = data;
            const imageBlobUrl = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL( data ));
            this.profileImage = imageBlobUrl.changingThisBreaksApplicationSecurity;
        }
    });
}

All works good, when I debug I can see that the param imageBlobUrl is from type SafeUrlImpl and does have the field "changingThisBreaksApplicationSecurity", but when I run production build I get this error "Property 'changingThisBreaksApplicationSecurity' does not exist on type 'SafeUrl'", how can I fix it?

Answer 1

You should not use that property, it's a private property. You should just assign the SafeUrl to your profileImage :

profileImage?: SafeUrl;

loadProfileImage(userID){
    this.settingsService.getProfileImage(userID).subscribe((data) =>{
        if (data){
            this.profileImage = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL( data ));
        }
    });
}

which you can use in your template like:

<img *ngIf="profileImage" [src]="profileImage">

_{note: you can also make use of a custom SafeUrl pipe which does this for you. In combination with the async pipe you make your code a lot smaller}