离子3-显示base64图像，清理不安全的url值safevalue必须使用[property] = binding

Question

我想为个人资料图片显示base64图片。 图像作为二进制数据存储在数据库中，我使用btoa（）将这个二进制数据转换为base64。现在我想将这个base64图像绑定到img src 我尝试了很多方法，但它不起作用，请帮忙 这是我的代码

profile.ts代码：

profilePicture(binImage)
{
    if(binImage != null)
    {
        var imageData = btoa(binImage);
        //console.log("Base64 Image: ",imageData);
        this.displayImage = imageData;
    }
}

profile.html代码：

<div class="profile-picture big-profile-picture" *ngIf="displayImage">
    <img src="data:Image/*;base64,{{displayImage}}">
</div>

显示错误“清理不安全的网址值safevalue必须使用[property] = binding”

Answer 1

在模板

中使用之前，添加清洁剂并清理网址

import { DomSanitizer } from '@angular/platform-browser';

...
constructor( private sanitizer: DomSanitizer, .... ) {}
...

profilePicture(binImage)
{
    if(binImage != null)
    {
        var imageData = btoa(binImage);
        //console.log("Base64 Image: ",imageData);
        this.displayImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+imageData);
    }
}

在您的模板中：

<div class="profile-picture big-profile-picture" *ngIf="displayImage">
    <img src="{{displayImage}}">
</div>

Answer 2

如果您不想存储两次数据，可以将元数据字符串放在html中。这对我的场景来说效果更好

<div class="profile-picture big-profile-picture">
    <img src="{{'data:image/png;base64,' + imageData}}">
</div>

Answer 3

请尝试为URL设置公共地址，以防万一您在其中保存了服务器，则必须将服务器的公共地址和密码保存在图像中。

Answer 4

在打字稿文件中，可以在CameraOptions中将FILE_URI替换为DATA_URL，例如destinationType: this.camera.DestinationType.DATA_URL

Answer 5

添加浏览器清理工具并清理URL，然后使用 src =“ {{your_variable}}” ，使用 [src] =“ your_variable” 。例如：

import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';

@Component({
  selector: 'app-image-modal',
  templateUrl: './image-modal.page.html'],
})
export class ImageModalPage {
  user_image: SafeResourceUrl;
  constructor( private sanitizer: DomSanitizer ) { }
  
  loadImage(){
    this.user_image = this.sanitizer.bypassSecurityTrustResourceUrl(/* your base64 string in here*');
  }
}

<img [src]="user_image" />