Question

我与Angular合作开发了一个移动应用程序，我试图以相同的方法在本机应用程序上显示图像，但是现在我必须按下一个按钮来显示该图像。 / p>

currentImageb: any;

public takePhoto() {
    console.log('Camera Photo Click');
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,
    }
    this.camera.getPicture(options).then((imageData) => {

    let base64Image = 'data:image/jpeg;base64,' + imageData;

    this.currentImageb = base64Image;

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

//Click on Shoh Img Button
  showImgB() {
    (document.getElementById('b') as HTMLImageElement).src = this.currentImageb;
  }

// I would like to show my image in the <img> without a button
<ion-button (click)="showImgB()">IMAGE id b</ion-button>
<img src="" id="b">

我还想显示我在应用程序页面上拍摄的每张照片，而不仅仅是最新的。谢谢

Answer 1

您不应使用例如getElementById来操纵DOM。操纵DOM应该是Angular中的不得已的手段。通常angular可以使用工具来完成您想要的事情，在这种情况下，只需对变量应用src，例如：

<img [src]="currentImageb">

在本机应用程序上显示图像

1 个答案: