0

ionic 4 capacitor camera plugin after taking a picture and then sanitizing but still getting this error:

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

here is my method in .ts file:

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);

}

and in .html file: <ion-item> <span (click)="takePicture()">Camera</span> </ion-item> <ion-item> <ion-img [src]="takenImg" alt=""></ion-img> </ion-item>

Bashir Saidi Wamula
  • 117
  • 7

1 Answers1

0

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"/>
Glenn
  • 688
  • 10
  • 16