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}}/>

要在页面中显示该网址，我需要做什么？

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

Answer 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)">

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

对我有用。

Ionic 4无法显示通过电话拍摄的照片

3 个答案: