Ionic v4 capacitor camera displaying image not working

Ionic Framework ionic-v3
1

hello,

i’m using camera and can take photo but photo not displaying at all…

i’m trying this very simple example with capacitor :

TS

import { Plugins, CameraResultType, CameraSource,FilesystemDirectory } from '@capacitor/core';


async takePhoto2() {
    console.log('-------------take photo 2------------------');
    
    const capturedImage = await Plugins.Camera.getPhoto(
      {
        quality: 90,
        allowEditing: true,
        source: CameraSource.Camera,
        resultType: CameraResultType.Uri
      }
    );
 
    // this.myImage = capturedImage.webPath;
    this.myImage = capturedImage.path;
  }

HTML

<ion-item tappable (click)="takePhoto2()">
          <ion-icon name="camera"></ion-icon>
        </ion-item>
        <p><img [src]="myImage"></p>

Xcode log

[log] - -------------take photo 2------------------
⚡️  To Native ->  Camera getPhoto 59577298
2019-05-28 10:45:04.949533+0200 App[1456:423236] [MC] System group container for systemgroup.com.apple.configurationprofiles path is /private/var/containers/Shared/SystemGroup/systemgroup.com.apple.configurationprofiles
2019-05-28 10:45:04.949981+0200 App[1456:423236] [MC] Reading from public effective user settings.
⚡️  TO JS {"path":"file:\/\/\/private\/var\/mobile\/Containers\/Data\/Application\/FB010015-C839-42A6-A832-41DF30C74F9E\/tmp\/photo-1.jpg","exif":{"PixelXDimension":3264,"ExposureProgram":2,"WhiteBalance":0,"SubjectArea":[1631,1223,1795,1077],"ISOSpeedRatings":[40],

What i’m doing wrong ? Please help

Thank you
n

2

HI ninecmoi, Im having the same problem, did you fine out what was wrong?
Thanks

3

Hi Nandomando,

sorry i have not seen your post, i hope you find a solution, i put mine here, hope helps someone

The error is related with the way the image is displayed in img tag, the supplied URL was not correctly supported
Soyou have to use Capacitor.convertFileSrc, more details :

  • remove capacitor from import

  • declare var Capacitor

  • replace this line :

let filePath = this.webView.convertFileSrc(result.uri);
by this one :
let filePath = Capacitor.convertFileSrc(result.uri);

Made it work