angular - Ionic 4 无法显示手机拍摄的照片

Question

我正在用手机拍照

takePicture(){
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }

  this.camera.getPicture(options).then((imageData) => {
     this.photo = this.webView.convertFileSrc(imageData)
  }, (err) => {
   // Handle error
  });

在传递给 convertFileSrc 之前，图像 URL 看起来像

file:///var/mobile/Containers/Data/Application/4889FE26-A26C-42AE-9EF2-D5FAE0ECBE10/tmp/cdv_photo_007.jpg

但是当我运行它时，我收到了这条警告信息:

WARN: WARNING: sanitizing unsafe URL value ionic://localhost/_app_file_/var/mobile/Containers/Data/Application/4889FE26-A26C-42AE-9EF2-D5FAE0ECBE10/tmp/cdv_photo_007.jpg

而且图像不显示。我试图在这样的页面上显示它:

   <img *ngIf="photo!=null" src={{photo}}/>

我需要对 url 做些什么才能在页面中显示它？

Answer 1

尝试:

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


constructor(private sanitizer: DomSanitizer,) {}

takePicture(){
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }

  this.camera.getPicture(options).then((imageData) => {
     this.photo = this.sanitizer.bypassSecurityTrustUrl(this.webView.convertFileSrc(imageData));
  }, (err) => {
   // Handle error
  });