How to view thumbnail image full screen in Ionic 3?

Question

I have an image uploaded to Firebase storage and I already viewing the images as a thumbnail.

My question is: I need to click on the image to view it as a full screen?

Note: image source include a variable {{item.name}}

Home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>



<ion-content padding>

  <ion-list>
      <ion-item *ngFor="let item of employees | async json">



        <ion-thumbnail item-start>
          <img src="https://firebasestorage.googleapis.com/v0/b/my-ionic-bedde.appspot.com/o/images%2F{{item.name}}.jpg?alt=media&token=be89c991-d6b1-49bf-bb64-cf103c835002">
        </ion-thumbnail>
        <h2> {{item.name}} {{item.lname}}</h2>
        <p>{{item.age}}</p>
       <p>{{item.dept}}</p>
        <button ion-button clear item-end">View</button>
        </ion-item>  

</ion-list>

</ion-content>

---

Answer 1

You are using the <ion-thumbnail> element inside an <ion-item> , and that will show your image simply as a thumbnail inside the element of a list. (see: https://ionicframework.com/docs/api/components/thumbnail/Thumbnail/)

(You are probably seeing something like this)

---

If you want to see an image in fullscreen, you need to make this functionality yourself (maybe creating a new page or another component), but the has nothing to do with that.

Either way i recommend you to have the "src" of your image as a string in your component, so you can pass it more easily to the full screen solution of your choose.

I hope it helps.