Ionic framework 无法显示文件URI中的图像，Ionic framework

我正在尝试显示从相机拍摄的图像，并将其显示到视图中。我在很多网站上搜索过这个答案，但都没有找到。我尝试过DomSanitizer、Base64甚至照片库，但它们返回的图像不显示

我的home.ts文件是

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  myPhoto:any;
  image;
  constructor(public navCtrl: NavController, private camera: Camera, public DomSanitizer: DomSanitizer) {

  }

  takePhoto(){
    const options: CameraOptions = {
      quality: 100,
      targetHeight: 320,
      targetWidth: 320,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: this.camera.PictureSourceType.CAMERA,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {
     // imageData is either a base64 encoded string or a file URI
     // If it's base64 (DATA_URL):
     this.myPhoto = 'data:image/jpeg;base64,' + imageData;
     this.image = imageData;
     console.log(this.myPhoto);
     alert(this.myPhoto);
    }, (err) => {
     // Handle error
    });
  }
}

这是我的home.html代码

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="takePhoto()" >Take Photo</button>

  <!-- <img src="{{myPhoto}}"/> -->
  <!-- <img src="{{image}}"/> -->
  <!-- <img [src]="DomSanitizer.bypassSecurityTrustUrl(myPhoto)"/> -->
  <!-- <img data-ng-src="{{myPhoto}}"/> -->
  <img src="data:image/jpeg;base64,file:///storage/sdcard0/Android/data/io.ionic.starter/cache/1533211220154.jpg"/>
</ion-content>

离子空白
拍照

---

这里的注释代码是我尝试过但没有成功。

用以下方式修改你的home.ts

  private openGallery(): void {
    let cameraOptions = {
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.FILE_URI,
      quality: 100,
      targetWidth: 1000,
      targetHeight: 1000,
      encodingType: this.camera.EncodingType.JPEG,
      correctOrientation: true
    }

    this.camera.getPicture(cameraOptions)
      .then(file_uri => this.imageSrc = file_uri,
      err => console.log(err));
  }

在html文件中

<img [src]="imageSrc"/> 

---

在ts文件中使用此功能

takePhoto(){
    const options: CameraOptions = {
      quality: 100,
      targetHeight: 320,
      targetWidth: 320,
      destinationType: this.camera.DestinationType.DATA_URL,
      sourceType: this.camera.PictureSourceType.CAMERA,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64 (DATA_URL):
      this.myPhoto = 'data:image/jpeg;base64,' + imageData;
      this.image = imageData;
      console.log(this.myPhoto);
    }, (err) => {
      // Handle error
    });
  }

在html中使用此选项

<img [src]="myPhoto"/>

---

我使用了文件插件及其readAsDataURL方法。这对我很管用。希望它能帮助人们：）

---

我终于找到了解决方案：

在组件中：

takePhoto(){
    const options: CameraOptions = {
      quality: 100,
      targetHeight: 320,
      targetWidth: 320,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: this.camera.PictureSourceType.CAMERA,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imgFileUri) => {
     this.myImg = (<any>window).Ionic.WebView.convertFileSrc(imgFileUri);
    }, (err) => {
     console.log(err);
    });
  }

takePhoto（）{
常量选项：摄影机选项={
质量：100，
目标灯：320，
targetWidth:320，
destinationType:this.camera.destinationType.FILE\u URI，
sourceType:this.camera.PictureSourceType.camera，
编码类型：this.camera.encodingType.JPEG，
mediaType:this.camera.mediaType.PICTURE
}
this.camera.getPicture（选项）。然后（（imgFileUri）=>{
this.myImg=（>=4
尝试使用此链接尝试MediaCapture插件，该插件也可以正常工作。感谢您的回答，但我通过在android 8.1.0上安装APK尝试了您的解决方案，但未成功：（这可能是与权限相关的问题。请在“设置”中检查应用程序权限。已检查存储权限。感谢您的回答，但我通过在android 8.1.0上安装APK尝试了您的解决方案，但未成功：（我没有得到错误，如果我控制台this.myPhoto，我会得到文件路径，但我在视图中看到的图像已损坏。如果设置
destinationType:this.camera.destinationType.DATA\u URL
你应该得到一个base64编码的字符串。我尝试通过以下方式在视图中显示图像：*带或不带base64字符串*带数据\u URL和文件\u URL*存储perm）Ision已检查我正在获取文件的路径，我已在存储上检查了它，但仍无法在视图中显示它。仅为了了解我的ionic版本是4.0.5 NPM版本：6.1.0节点-v 10.7.0 cordova-v 8.0.0数据\u URL应避免作为（它可能会占用大量内存，并导致应用程序崩溃或内存不足错误。如果可能，请使用FILE_URI或NATIVE_URI）对于FILE_URI，我们可以将其转换为base64（如果需要）从gallery中拍摄图像时不工作，只有在android中，在iOS中工作正常，有人对此有解决方案吗？readAsDataURL方法将图像文件url转换为base64 img。所以为什么不使用插件中的直接base64字符串（destinationType:this.camera.destinationType.DATA_URI）谢谢在ionic 3应用程序中工作。我运气不好：（.不知道为什么不起作用。我已经花了两天的时间在这上面了。你试过爱奥尼亚3吗？
takePhoto(){
    const options: CameraOptions = {
      quality: 100,
      targetHeight: 320,
      targetWidth: 320,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: this.camera.PictureSourceType.CAMERA,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imgFileUri) => {
     this.myImg = (<any>window).Ionic.WebView.convertFileSrc(imgFileUri);
    }, (err) => {
     console.log(err);
    });
  }

<img [src]="myImg" />