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

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>