时间戳

首页 > 解决方案 > 相机照片未显示离子 3

android - 相机照片未显示离子 3

问题描述

我尝试显示用我的相机拍摄的照片。

这是我的 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>

然后，这是我的 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);

}

所以，我想在我的卡片上显示我的照片。问题是什么 ？我遵循了许多不同的教程，阅读了 Ionic 文档，但没有找到解决方案。

我不得不说：当我单击“Envoyer Email”按钮（发送电子邮件）时，我的照片会正确显示在我的邮件中，并带有此代码。但是如果我使用，我的图像不会显示在我的邮件中：

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

谢谢您的帮助。

标签： androidhtmliostypescriptionic3

解决方案

您不能直接从本地路径显示图像。在您的设备中。相反，您需要从本地路径读取该图像，然后将该数据保存到任何变量中，然后将该变量作为 src 分配给 img 标签。

a 用简单的功能做到了这一点，如下

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) => {

        });
}

这对我有用...

推荐阅读