camera - 如何使用电容器插件成功地对 ionic 4 中拍摄的照片进行消毒

Question

离子 4 电容器相机插件在拍照然后消毒但仍然出现此错误：

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

这是我在 .ts 文件中的方法：

import { Component, OnInit } from '@angular/core';
import { Plugins, CameraResultType, CameraSource} from '@capacitor/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

const { Camera } = Plugins;

  constructor(
    public sanitizer: DomSanitizer
  ) { }


 async takePicture() {

  const image = await Camera.getPhoto({
    quality: 100,
    allowEditing: false,
    resultType: CameraResultType.DataUrl,
    source: CameraSource.Camera
  });

  this.takenImg = this.sanitizer.bypassSecurityTrustResourceUrl(image.dataUrl);

}

在 .html 文件中： <ion-item> <span (click)="takePicture()">Camera</span> </ion-item> <ion-item> <ion-img [src]="takenImg" alt=""></ion-img> </ion-item>

Answer 1

I use a standard <img> tag for this rather than the <ion-img> tag and I don't need to sanitize:

<img [src]="image.dataUrl"/>