ionic-framework - 如何在 Ionic 3 中全屏查看缩略图？

Question

我有一张图片上传到 Firebase 存储，并且我已经以缩略图的形式查看这些图片。

我的问题是：我需要点击图片才能全屏查看吗？

注意：图像源包含一个变量{{item.name}}

主页.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

您正在使用 中的<ion-thumbnail>元素<ion-item>，这会将您的图像简单地显示为列表元素内的缩略图。（见：https ://ionicframework.com/docs/api/components/thumbnail/Thumbnail/ ）

（你可能会看到这样的东西）

---

如果您想全屏查看图像，则需要自己创建此功能（可能创建新页面或其他组件），但这与此无关。

无论哪种方式，我都建议您将图像的“src”作为组件中的字符串，以便您可以更轻松地将其传递给您选择的全屏解决方案。

我希望它有所帮助。