Как просмотреть уменьшенное изображение в полноэкранном режиме в ионном 3 - PullRequest
Новая
       41

Как просмотреть уменьшенное изображение в полноэкранном режиме в ионном 3

0 голосов
/ 10 июня 2018

извините за мой плохой английский язык, у меня есть изображения, загруженные в хранилище Firebase, и я уже просматриваю изображения в виде миниатюр

мой вопрос: мне нужно нажать на изображение, чтобы просмотреть его в полном объемеэкран?

Примечание: источник изображения содержит переменную {{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>

1 Ответ

0 голосов
/ 11 июня 2018

Вы используете элемент <ion-thumbnail> внутри <ion-item>, и это покажет ваше изображение просто в виде миниатюры внутри элемента списка.(см .: https://ionicframework.com/docs/api/components/thumbnail/Thumbnail/)

enter image description here

(Возможно, вы видите что-то подобное)

Если вы хотите увидетьизображение в полноэкранном режиме, вам нужно сделать эту функцию самостоятельно (может быть, создать новую страницу или другой компонент), но это не имеет никакого отношения к этому.

В любом случае, я рекомендую вам иметь "src" изваше изображение в виде строки в вашем компоненте, так что вы можете легче передать его в полноэкранное решение по вашему выбору.

Надеюсь, это поможет.

...