Ionic 4 无法显示手机拍摄的照片答案

【问题标题】：Ionic 4 cannot display photo taken by phoneIonic 4 无法显示手机拍摄的照片
【发布时间】：2019-03-22 05:07:41
【问题描述】：

我正在使用手机拍照

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 做什么才能在页面中显示它？

【问题讨论】：

看看这个：stackoverflow.com/questions/54356076/…

标签： angular ionic-framework ionic4

【解决方案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
  });

【讨论】：

【解决方案2】：

对我有用的是使用DomSanitizer：

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

constructor(
    private webview: WebView,
    private domSanitizer: DomSanitizer
  ) { }

public getImgContent(imageName: string): SafeResourceUrl {
 return this.domSanitizer.bypassSecurityTrustResourceUrl(this.webview.convertFileSrc(this.file.dataDirectory + imageName));
}

然后在你看来：

<img [src]="getImgContent(imageName)">

【讨论】：

【解决方案3】：

试试这个：

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 = (<any>window).Ionic.WebView.convertFileSrc(imageData);
       console.log("fewf",this.photo)
          }, (err) => {
     // Handle error
    });
  }

它对我有用。

【讨论】：