0

I am simply trying to allow a user to take a photo, store it as a data URI and then display that image. For some reason this only displays a boken image link and I'm not sure I understand. selectImage() should allow the user to either select an image or take a new one, then display the image.

My view:

<ion-row *ngIf="imageSrc">
  <ion-col class="ion-text-center">
    <img alt="cropped photo" height="500px" [src]="imageSrc" />
    <p>{{imageSrc}}</p>
  </ion-col>
</ion-row>

Component:

selectImage() : void {
    this.photo.selectImageSheet().then(() => {
      if ( typeof(this.photo.imageSource) == 'number' ) {
        this.photo.pickImage(this.photo.imageSource).then(imageURI => {
          this.global.handleResponse(imageURI)
          this.imageSrc = imageURI
        })
      }
    })
  }

Photo service:

pickImage(sourceType: number) : Promise<any> {
    return new Promise((resolve, reject) => {
      this.selectImage(sourceType).then( imageURI => {
        resolve(imageURI)
      })
    })
  }

 selectImage(srcType : number = 1) : Promise<any> {

    let options: CameraOptions = {
      quality: 100,
      sourceType: srcType,
      targetWidth: 600,
      targetHeight: 1200,
      destinationType: this.camera.DestinationType.FILE_URI,
      correctOrientation: true,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    return new Promise(resolve => {
      this.camera.getPicture(options)
        .then((imageURI) => {

          this.imageData = imageURI;

          resolve(this.imageData)
        })
        .catch(err => this.globals.handleResponse(JSON.stringify(err)))
    })
  }

The documentation seems pretty clear that the FILE_URI should be able to be set as the src so I'm really not sure what could be going wrong...

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.FILE_URI });

function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI;
}

function onFail(message) {
    alert('Failed because: ' + message);
}
Jeremy Thomas
  • 6,240
  • 9
  • 47
  • 92

1 Answers1

0

There's a popular method to fix this which is to convert the file like so:

    this.imageData = this.win.Ionic.WebView.convertFileSrc(imageURI);

It works on photos and videos. Here's the original response https://stackoverflow.com/a/55934321/10243902

Nonetheless, I prefer to show the image as an base64 right away. If you feel like using it just install the Base64 Plugin :

ionic cordova plugin add com-badrit-base64
npm install @ionic-native/base64

Initialize on the constructor

constructor(private base64: Base64 ){ }

and use it like so:

      this.base64.encodeFile(imageURI).then((base64Img) => {
          this.imageData = base64Img;
        })
Ivan Cepeda
  • 66
  • 4
  • After doing that I still have an issue. The src is saved as "ionic://localhost/_app_file_/...". Is that right? Should it be data and not a URL? – Jeremy Thomas Jan 26 '21 at 17:40
  • The path looks correct. It should work either way, path or base64 data. Try using [DomSanitizer](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/3) to display the image. – Ivan Cepeda Jan 26 '21 at 22:54