How to display image in same model from different folder in ionic 4?

@gokujy wrote:

Hello
I have images in 10 folders and I am displaying image in 10 pages. I have one model for display single image. So my question is is there any way to display all image in the same model.
here I have the code:

**home.ts**

<ion-card class="one-image" *ngFor="let image of imgArr">
          <img src="http://example.com/ionic/imgfolder1/{{image}}.jpg" tappable (click)="openPreview(image)">
        </ion-card>

**home.ts**

 import { ModalController } from '@ionic/angular';
        import { ImageModalPage } from '../image-modal/image-modal.page';
    
       openPreview(image) {
        this.modalController.create({
          component: ImageModalPage,
          componentProps: {
            image: image
          }
        }).then(modal => {
          modal.present();
        });
      }

image-model.page.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
    import { NavParams, ModalController } from '@ionic/angular';

    @ViewChild('slider', { read: ElementRef })slider: ElementRef;
    image: any;

    constructor(private navParams: NavParams, private modalController: ModalController) { }

    ngOnInit() {
  	  this.image = this.navParams.get('image');
    }

    zoom(zoomIn: boolean) {
     let zoom = this.slider.nativeElement.swiper.zoom;
     if (zoomIn) {
       zoom.in();
     } else {
       zoom.out();
     }
    }
 
    close() {
     this.modalController.dismiss();
    }

model.html

<ion-slides #slider>
      <ion-slide>
        <div class="swiper-zoom-container">
          <img src="http://example.com/ionic/imgfolder1/{{ image }}.jpg">
        </div>
      </ion-slide>
    </ion-slides>

Here is my full code, I want to display images from diff page in the same model.

Posts: 1

Participants: 1

Read full topic