fullscreen images on click ionic4 - html

Question

I'm looking to make a live go fullscreen when I click on it, but I did not succeed to find any tutorial that matches my specific case...
I tried to use javascript but did not succeed :/
so my home.page.ts is empty,
but here is my HTML code:
<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&Quality=Clarity&0"/>
</ion-card-content>
</ion-card>
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>

Answer 1

If you want to display an image full screen when clicked you can use the ionic plugin Photo Viewer. It also adds the ability to pan, zoom, and share the image.

Answer 2

Try this code. I hope it will helps you.
HTML:
<ion-content>
<div class="ion-padding">
<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="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
(click)="clickImage('https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500')" />
</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="https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80://84.87.238.54:80/SnapshotJPEG?Resolution=640x480&Quality=Clarity&0"
(click)="clickImage('https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80://84.87.238.54:80/SnapshotJPEG?Resolution=640x480&Quality=Clarity&0')" />
</ion-card-content>
</ion-card>
</button>
</ion-col>
</ion-row>
</div>
TS:
import { Component } from '#angular/core';
import { PhotoViewer } from '#ionic-native/photo-viewer/ngx';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private photoViewer: PhotoViewer) {}
clickImage(image){
console.log("image clicked",image);
this.photoViewer.show(image);
}
}