Question

我正在为我的应用程序实现一个相机。相机正在工作。它打开了，我也可以拍照。但问题是当我按“使用图片”然后图像应该出现在卡片上，但只有一张没有图片的空卡片。你有什么想法？我上传了以下代码。

HTML

<ion-content padding> 
 <ion-card>
  <img [src]="photo">
 </ion-card>
</ion-content>

打字稿

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

/**
 * Generated class for the PostPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-post',
  templateUrl: 'post.html',
})
export class PostPage {
  public photos: any;
  public base64Image: string;
  constructor(public navCtrl: NavController, private camera: Camera) {

  }
  ngOnInit(){
    this.photos = [];
  }

  ionViewDidEnter(){                    //Damit Kamera automatisch öffent
   const options: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.DATA_URL,
  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:
 this.base64Image = 'data:image/jpeg;base64,' + imageData;
  this.photos.push(this.base64Image);
  this.photos.reverse();

}, (err) => {
 // Handle error
});
  }
}

Answer 1

在ts文件中有一个photos数组，用于推送图像对象。您只需使用*ngFor循环播放它。

<ion-card *ngFor="let photo of photos"> 
    <img [src]="photo"> 
</ion-card>

相机事件后拍摄的照片不会消失

1 个答案: