SafeValue 必须使用 [property]=binding，但它是

Question

大家好，这让我发疯了。我尝试了所有可以在网上找到的修复程序，但似乎没有任何效果。

我正在从数据库加载 base64 图像信息，它返回 base64 编码图像，如下所示：

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

然后在我的 TS 文件中，我有以下功能：

photo_url(data:string){

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

}

我的 HTML 文件如下所示：

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

但是我收到以下错误并且图像未显示：

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

错误说 sanitizer 应该使用属性绑定，确实如此，但它仍然显示该错误并且图像不显示。

我错过了什么吗？

谢谢！

Answer 1

当您使用.toString 时，您将根据需要将user_photo 设置为字符串而不是SafeResourceUrl。

实际上只需删除.toString() 即可使其正常工作。否则，您实际上只是在撤消 DomSanitizer 的工作。

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