时间戳

首页 > 解决方案 > Ionic 4 无法显示手机拍摄的照片

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

问题描述

我正在使用手机拍照

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

标签： angularionic-frameworkionic4

解决方案

尝试 ：

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

推荐阅读