如何在 Ionic 3 中显示捕获的图像预览？答案

【问题标题】：How to display the captured image preview in Ionic 3?如何在 Ionic 3 中显示捕获的图像预览？
【发布时间】：2019-01-19 10:33:25
【问题描述】：

我正在开发 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[] 变量

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

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

请让我摆脱这个问题。

【问题讨论】：

在浏览器中打开路径会发生什么？看到图片了吗？
当我捕获图像时它保存到我的移动存储中的上述路径..你是要我在我的移动浏览器中打开该路径吗？？？

标签： angular ionic-framework ionic3 ionic-native

【解决方案1】：

请试试这个： 1. TS文件中的st：

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


}

HTML 文件：

img src="{{base64Image}}" alt="" class="image_container

【讨论】：

【解决方案2】：

试试这个，

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

【讨论】：