如何在Ionic 3中显示捕获的图像预览?

时间:2018-08-12 14:25:43

标签: angular ionic-framework ionic3 ionic-native

我正在开发ionic 3应用程序,我想用相机捕获多张(3)图像,在相机图标下方显示图像的预览,并上传图像以及剩余信息。

我无法显示捕获的图像的预览。

let options: CaptureImageOptions = { limit: 3 };
this.mediaCapture.captureImage(options)
  .then(data: MediaFile[]) => {
      this.images = data;
    },
    (err: CaptureError) => console.error(err)
  );

HTML代码-

      <div *ngFor="let image of images">
        <img src="{{image.fullPath}}" />
      </div>

我在数据中获取以下图像数组:MediaFile []变量 enter image description here

当我将图像的完整路径绑定到img src时,当我打印给出以下图像路径的完整路径时,它什么也没显示。

  

file:///storage/emulated/0/Pictures/1534070545509.jpg

请让我摆脱这个问题。

2 个答案:

答案 0 :(得分:1)

请尝试以下操作: 1.在TS文件中:

async captureImage(useAlbum: boolean) {

    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      ...useAlbum ? {sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM} : {}
    }

    const imageData = await this.camera.getPicture(options);

    this.base64Image = `data:image/jpeg;base64,${imageData}`;


}
  1. HTML文件:

img src =“ {{base64Image}}”“ alt =”“ class =” image_container

答案 1 :(得分:0)

尝试一下,

<div *ngFor="let image of images">
        <img src="'data:image/jpeg;base64,' +{{image.fullPath}}" />
</div>