Ng-lazyload-image: ionic slides shows first image only

Created on 3 Jan 2018  ·  6Comments  ·  Source: tjoskar/ng-lazyload-image

Hello,

Having similar issue to https://github.com/tjoskar/ng-lazyload-image/issues/256

However, since it is a closed issue, I have created a new open one.

However, when i tried to use the same fix. I am getting a runtime error on ionic 3

page.ts - here im getting a debug notice on Subject not found. TS.

imageChange$ = new Subject();

  slideChanged() {
    this.imageChange$.next();
  }

page.html

<ion-slides *ngIf="(item | async).image1" class="image-slider" loop="true" slidesPerView="2" (ionSlideDidChange)="slideChanged()">
        <ion-slide *ngIf="(item | async).image1">
          <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image1" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
        </ion-slide>
        <ion-slide *ngIf="(item | async).image2">
            <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image2" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
          </ion-slide>
          <ion-slide *ngIf="(item | async).image3">
              <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image3" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
            </ion-slide>
            <ion-slide *ngIf="(item | async).image4">
                <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image4" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
              </ion-slide>
              <ion-slide *ngIf="(item | async).image5">
                  <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image5" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
                </ion-slide>
                <ion-slide *ngIf="(item | async).image6">
                    <img [defaultImage]="'https://www.placecage.com/1000/1000'" [lazyLoad]="(item | async).image6" class="thumb-img" imageViewer [scrollObservable]="imageChange$" [offset]="'100'">
                  </ion-slide>
      </ion-slides>
    </ion-card>

Uncaught (in promise): ReferenceError: Subject is not defined ReferenceError: Subject is not defined

Most helpful comment

Hi @tjoskar thanks..
i worked when i use


All 6 comments

Hi @myrsk,
Have you imported Subject from rxjs? Like this: import { Subject } from 'rxjs/Subject';?

@tjoskar unfortunately, since I couldn't get it to work for some days, I had to remove it and used a different approach.

I will try this though, not sure 100% if i did import.

Thanks.

@myrsk, I see, let me know if it doesn't solve your issue.

hi please any solution for this issue ? for now i am setting my images to default image.

Hi @sabiridwan,
Do you get the same error, ReferenceError: Subject is not defined ReferenceError: Subject is not defined? In any case, please open a new issue and I will try to help you.

Hi @tjoskar thanks..
i worked when i use


Was this page helpful?
0 / 5 - 0 ratings

Related issues

walfro picture walfro  ·  11Comments

alisahinozcelik picture alisahinozcelik  ·  4Comments

coryrylan picture coryrylan  ·  7Comments

vugar005 picture vugar005  ·  10Comments

el-davo picture el-davo  ·  4Comments