0

I try to display a photo took with my camera.

This is my HTML :

<ion-grid>
 <ion-row>
  <ion-col col-6>
   <button ion-button full (click)="prendreUnePhoto()">Prendre une photo</button>
  </ion-col>

  <ion-col col-6>
   <button ion-button full (click)="choisirUneImage()">Choisir une image</button>
  </ion-col>
 </ion-row>

<ion-row>
 <ion-col col-12>
  <button ion-button full (click)="envoiMail()">Envoyer Email</button>
 </ion-col>
</ion-row>


<ion-card>
 <ion-card-header>Image</ion-card-header>
 <ion-card-content>
  <img [src]="currentImage" *ngIf="currentImage"/>
 </ion-card-content>
</ion-card>

And then, this is my TypeScript :

currentImage = null

constructor(public navCtrl: NavController, public navParams: NavParams, private emailComposer : EmailComposer, private camera: Camera) {
  }

prendreUnePhoto() {
    const options: CameraOptions = {
      sourceType: this.camera.PictureSourceType.CAMERA,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE

    }
    this.camera.getPicture(options).then((imageData) => {
      this.currentImage = imageData;
    }, (err) => {
      // Handle error
      console.log('Image error: ', err);
    });
  }
envoiMail(){      
    let email = {
      to : 'bastien.roussel.19@gmail.com',
      subject : '[IONIC] test mail',
      body : 'Premier <b>email</b> de test depuis ionic 3',
      attachments: [
        this.currentImage
      ],
      isHtml : true
    };

    this.emailComposer.open(email);

}

So, I want to display my photo on my card. What is the problem ? I followed many different tutorials, I read the Ionic doc, but I didn't find the solution.

I have to say you that : when I click on the button "Envoyer Email" (send email), my photo is correctly displayed on my mail with this code. But my image is not displayed on my mail if I use :

this.currentImage = 'data:image/jpeg;base64,' + imageData;

Thank you for your help.

Bastien Roussel
  • 25
  • 2
  • 9

1 Answers1

1

You can't display image directly from your local path. in your device. instead, you need to read that image from your local path, then save that data in to any variable and then assign that variable to img tag as src.

a have done this with simple function , as follows

public currentImage**strong text**: any;

  readImage(filePath) {
    let tempPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
    let imageName = filePath.substr(filePath.lastIndexOf('/') + 1);
    this.file.readAsDataURL(tempPath, imageName)
        .then((res) => {
            this.currentImage= res;
        }, (err) => {

        });
}

this works for me...

Tej Patel
  • 119
  • 2
  • 5
  • Hello. It's not a photo from my local path. It's a photo took by my camera. In the different tutorials that I watched, they display (with approximately the same code) directly the photo. – Bastien Roussel Sep 12 '18 at 11:13
  • https://stackoverflow.com/questions/49478537/displaying-a-file-uri-image-taken-by-native-camera-in-ionic-3 – Tej Patel Sep 17 '18 at 05:05