html - 点击 ionic4 全屏图像

Question

当我点击它时，我正在寻找全屏直播，但我没有成功找到任何与我的具体情况相匹配的教程......我尝试使用javascript但没有成功：/所以我的home.page。 ts 是空的，但这是我的 HTML 代码：

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
          <button >
          <ion-card color="dark" >
              <ion-card-header>
                  <b>Parking</b>
              </ion-card-header>     
              <ion-card-content>
                  <img id="img" width="250" height="160" src="http://131.173.8.23:80/mjpg/video.mjpg"/>
              </ion-card-content>
            </ion-card>
          </button>
      </ion-col>
      <ion-col>
          <button>
          <ion-card color="dark">
              <ion-card-header>
                  <b>Hall</b>
              </ion-card-header>     
              <ion-card-content>
                  <img width="250" height="160" src="http://131.95.3.162:80/mjpg/video.mjpg"/>
              </ion-card-content>
            </ion-card>
            </button>
      </ion-col>
      <ion-col>
          <button>
          <ion-card color="dark">
              <ion-card-header>
                  <b>Accueil</b>
              </ion-card-header>     
              <ion-card-content>
                  <img width="250" height="160" src="http://84.87.238.54:80/SnapshotJPEG?Resolution=640x480&amp;Quality=Clarity&amp;0"/>
              </ion-card-content>
            </ion-card>
            </button>
      </ion-col>          
    </ion-row>
  </ion-grid>
</ion-content>

标签： htmlionic4

Answer 1

如果您想在单击时全屏显示图像，可以使用离子插件Photo Viewer。它还增加了平移、缩放和共享图像的能力。