Как отобразить предварительный просмотр захваченного изображения в Ionic 3?

Я разрабатываю приложение 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, он ничего не показывает, когда я печатаю полный путь, он дает следующий путь к изображению.

файл: ///storage/emulated/0/Pictures/1534070545509.jpg

Пожалуйста, вытащи меня из этой проблемы.


ionic-framework angular ionic3 ionic-native
person Raj    schedule 12.08.2018    source источник
comment
что происходит, когда вы открываете путь в браузере? вы видите изображение?   -  person Sajeetharan    schedule 12.08.2018
comment
когда я захватываю изображение, оно сохраняется в моем мобильном хранилище по указанному выше пути .. Вы просите меня открыть этот путь в моем мобильном браузере ???   -  person Raj    schedule 12.08.2018

Ответы (2)


arrow_upward
1
arrow_downward

Пожалуйста, попробуйте следующее: 1. st в файле 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

person swapnil Nandanwar    schedule 07.01.2019

arrow_upward
0
arrow_downward

Попробуй это,

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