Ng-lazyload-image: Ionic 2 - not working inside "ion-card" directive

Created on 22 Aug 2017 · 11Comments · Source: tjoskar/ng-lazyload-image

Hi there,

I'm facing this issue with Ionic 2:

Basically, what is happening is that when the img tag is inside the ion-card directive the image is not loading at all, it only shows the "defaultImage". Positioning the image outside the ion-card it works OK.

Please let me know if you can take a look at this.

in place.ts
...
export class PlacePage {

defaultImage: string = 'http://via.placeholder.com/350x150';
place: any = {
imgUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSCP8YYuzKCXQLhQ7mkH5I_VpZ0v23BWrJ4QkxSSldl7sOV__xKA'
};

constructor() {
}

...
}

in place.html:
<ion-card> <img [defaultImage]="defaultImage" [lazyLoad]="place.imgUrl" /> ..... </ion-card>

Thanks

Wait for feedback

Source

walfro

All 11 comments

Hi,

Are the ion-cord inside some view or anything that has its own scroll container? Can you give me more of your view?

tjoskar on 22 Aug 2017

Thanks for the quick reply.

Here is what my view basically has:

** all that wrapped in a "ion-content" but for some reason is not being properly formatted here.

    <ion-card-content>
        <ion-card-title>
            <div>{{place.name}}</div>
        </ion-card-title>
        <div>
            Some content here ....
        </div>
    </ion-card-content>
</ion-card>

walfro on 22 Aug 2017

I think ion-content can be the problem. ng-lazyload-image are using window per default for scroll events but ion-content is using their own scroll container so we need to listen for scroll event on ion-content.

Can you try to use the following template:

<ion-content #container>
  <ion-card>
    <img defaultImage]="defaultImage" [lazyLoad]="place.imgUrl" [scrollTarget]="container.scrollElement" />
    you content
  </ion-card>
</ion-content>

tjoskar on 23 Aug 2017

Thanks for looking into this,

I have tried with the provided code but made no difference, I think ion-content is not the problem and ion-card might be, because if you take the img tag outside the ion-card it works just fine.

Did you try to reproduce it from your side? I could share a project in bitbucket in case you didn't.

Thanks

walfro on 23 Aug 2017

Humm, okay. Yeah, that would be super nice if I could get access to your project :) I'm using tjoskar as username on bitbucket if it is a close project.

tjoskar on 23 Aug 2017

Did you solve the problem? I will close this issue now but feel free to reopen it.

tjoskar on 5 Nov 2017

I am having a similar problem that may be related to endless scrolling. My project in development is http://veterinary.communityone.com , you would have to create a login to see the content then click on social feed from the sidebar once logged in. The initial page shows the image fine but once endless scrolling begins the first image reverts to a spinner and never appears again.

capture