CODEWITHSUNDEEP
angularionic4
MadMac
MadMac

Reputation: 4851

ion-img display issue on Android device

I am displaying an image in a modal. It works fine on web but on an Android device it only intermittently shows the image (otherwise it shows a no image placeholder). If I get closing and reopening the modal / image by clicking on the thumbnail, about 25% of the time it shows the image ok.

I figure its something to do with the async loading of the base64 image data I am passing in as a parameter. The page renders before it is loaded I guess. Any ideas to fix this?

Modal call:

 <ion-col size="3" *ngFor="let image of check.images">
  <ion-thumbnail>
     <ion-img [src]="image" (click)="onViewImage(image)"></ion-img>
  </ion-thumbnail>
 </ion-col>

constructor(private plt: Platform,
              private fileOpener: FileOpener,
              public defectReportService: DefectReportService,
              private router: Router,
              private route: ActivatedRoute,
              private socialSharing: SocialSharing,
              public storage: Storage,
              private notificationService: NotificationService,
              public modalCtrl: ModalController,
              private navCtrl: NavController
              ) { }

onViewImage(imageDataUrl: string) {
this.modalCtrl.create({
    component: ViewImageComponent,
    componentProps: { imageDataUrl: imageDataUrl }
  }).then(modalEl => {
    modalEl.present();
  });

}

Modal code:

 <ion-content class="content-modal">
  <div class="content-inner">
      <ion-img [src]="imageDataUrl" (click)="onCloseModal()"></ion-img>
  </div>
</ion-content>


export class ViewImageComponent implements OnInit {
  @Input() imageDataUrl: string;

  constructor(private modalCtrl: ModalController) { }

  ngOnInit() {
  }

  onCloseModal() {
    this.modalCtrl.dismiss();
  }

}

Upvotes: 0

Views: 489

Answers (1)

MadMac
MadMac

Reputation: 4851

Fixed using the NavParams solution here:

https://medium.com/@david.dalbusco/how-to-declare-and-use-modals-in-ionic-v4-4d3f42ac30a3

The code below works 100% of the time:

export class ViewImageComponent implements OnInit {
  @Input() imageDataUrl: string;
  imageDataUrl2: string;

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

  ngOnInit() {
  }
  ionViewWillEnter() {
    this.imageDataUrl2 = this.navParams.get('imageDataUrl');

  }

  onCloseModal() {
    this.modalCtrl.dismiss();
  }

}


<ion-content class="content-modal">
  <div *ngIf="imageDataUrl2" class="content-inner">
      <ion-img [src]="imageDataUrl2" (click)="onCloseModal()"></ion-img>
  </div>
</ion-content>

Upvotes: 1

Related Questions