单击ionic4时显示全屏图像

ionic start myApp blank
cd myApp
ionic cordova plugin add cordova-plugin-ionic-webview
npm install @ionic-native/ionic-webview
npm install ionic-img-viewer --save

<ion-content>
  <ion-img [src]="imageUrl" (click)="showFullScreenImage()"></ion-img>
</ion-content>

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ImageViewerComponent } from 'ionic-img-viewer';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  imageUrl: string = 'path/to/your/image.jpg';

  constructor(private modalCtrl: ModalController) {}

  async showFullScreenImage() {
    const modal = await this.modalCtrl.create({
      component: ImageViewerComponent,
      componentProps: {
        imageSrc: this.imageUrl
      },
      cssClass: 'image-viewer-modal'
    });

    return await modal.present();
  }
}

.image-viewer-modal {
  ion-content {
    --background: transparent;
  }

  .image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);

    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
}