Ионная камера делает снимок, но не показывает его. Я хочу сделать снимок и показать его на той же странице

Question

Я пытаюсь использовать API Ion для родной камеры, вот такая картинка, как показывает камера, и я могу щелкнуть изображение, но изображение не появляется

Я использую Android Oreo, Ionic 3 и последние Cordova и работает приложение на реальном устройстве

<-- file home.html-->`
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button round (click)="eventofClick()">Round Button</button>

  <p><img src="{{image}}" /> </p> 

{{изображение}}

</ion-content>
<--home.ts-- ------------------------------------------------------>

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  image: any;

  constructor(public navCtrl: NavController, public camera: Camera) {
    console.log("constructor");

  }
eventofClick() {
    console.log("called");
    console.log('inside');
    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) => {
   // imageData is either a base64 encoded string or a file URI
   // If it's base64 (DATA_URL):
   let base64Image = 'data:image/jpeg;base64,' + imageData;
  this.image = 'data:image/jpeg;base64,' + imageData;
  }, (err) => {
   // Handle error
  });
}
}

я хочу, сделав снимок, я хочу показать его вместе что я получаю как вывод

и в консоли я получаю 1549019043619.jpg:1 GET unsafe:data:image/jpeg;base64,file:///storage/emulated/0/Android/data/com.catalyst.android.safra/cache/1549019043619.jpg 404 (Not Found)

Answer 1

Попробуйте, это вернет вам FILE_URI вашего изображения. Если вы загружаете изображение на сервер, попробуйте показать изображения с вашего сервера после загрузки. или Вы можете показать это непосредственно с помощью базы 64. Для Base64 вы должны изменить destinationType: this.camera.DestinationType.FILE_URI на destinationType: this.camera.DestinationType.DATA_URL в CameraOptions. загрузить изображение и показать его.

takePhoto(){
      const options: CameraOptions = {
              quality: 80,
              destinationType: this.camera.DestinationType.FILE_URI,
              encodingType: this.camera.EncodingType.JPEG,
              mediaType: this.camera.MediaType.PICTURE,
              sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
            }
     this.camera.getPicture(options).then((imageData) => {
             // imageData is either a base64 encoded string or a file URI
             // If it's base64 (DATA_URL):
             console.log(imageData);
               this.imageUpload(imageData) / pass your URL in upload function
            }, (err) => {
             // Handle error
            });
    }


imageUpload(path) {
      const fileTransfer: FileTransferObject = this.transfer.create();
      let options: FileUploadOptions = {
          fileKey: 'image',
          fileName: '.png',
          chunkedMode: false,
          //mimeType: "image/jpeg",
        }
        fileTransfer.upload(path, 'Server_URL', options)
          .then((data) => {
          let res = JSON.parse(data.response);
          if (res.success == true) {
              //server will return you image name Push that name into an array and show it on your View
          }
        }, (err) => {
          console.log(err);
        });
    }