[bug]: Images loaded remotely don't load until cached. about ngx-ionic-image-viewer HOT 7 CLOSED

Hi @selected-pixel-jameson, in your case you create a new modal without any reference to your <ion-img /> child. The src attribute is always required. Try this:

componentProps: {
  src: this.item.imageUrl,
}

You know you can also use the directive of the ngx-ionic-image-viewer which solve your case directly?

<ion-img ionImgViewer [title]="item.title" [src]="item.thumbnail" [srcHighRes]="item.imageUrl"></ion-img>

from ngx-ionic-image-viewer.

Hi @SimonGolms Adding src to the componentProps doesn't help. I can't use the directive on because this is wrapped inside another element that is clickable and I need to cancel the event propagation via event.stopPropogation()

async presentImage() {
    event.stopPropagation();
    const modal = await this.modalController.create({
      component: ViewerModalComponent,
      componentProps: {
        src: this.item.imageUrl,
      },
      cssClass: "ion-img-viewer",
      keyboardClose: true,
      showBackdrop: true,
    });

    return await modal.present();
  }

Still the same issue. I just see a black screen. if I click anywhere on the screen the image will then show up. But it will not show up when loading.

from ngx-ionic-image-viewer.

As I stated, this works fine when I reference the same image URL that is being loaded in the list view of items. If I change that list to load the imageUrl instead of the the thumbnail url then the imageUrl will load fine as well, but this is not optimal as the image referenced in the imageUrl is much larger.

from ngx-ionic-image-viewer.

Also, if I set this up to load a completely different image, but that image is referenced locally from the assets folder it works fine. It's only an issue when loading a remote image that hasn't been cached yet.

from ngx-ionic-image-viewer.

Oh great... so this only appears to be happening on Android devices and when using the pixel 2 device in chrome dev.

from ngx-ionic-image-viewer.

Looks like it is a bug with Android or Ionic... I had to add this to get it to work.

 img{
    min-height: 1px !important;
  }

ionic-team/ionic-framework#18734

from ngx-ionic-image-viewer.

Thanks for your message and the recent workaround for Android @selected-pixel-jameson.

from ngx-ionic-image-viewer.