Ionic 2 - not working inside "ion-card" directive

[walfro]

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

[tjoskar]

Hi,

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

[walfro]

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>
    <img defaultImage]="defaultImage" [lazyLoad]="place.imgUrl" />

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

[tjoskar]

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>

[walfro]

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

[tjoskar]

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]

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

[jcbowyer]

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.

[tjoskar]

@jcbowyer, I just created an account but I could not reproduce the problem. I only three posts and did not get any infinite scroll.

[jcbowyer]

Thanks I eventually changed something and it started working. I’m not sure exactly what fixed it

[jeffreyramia]

@tjoskar Same issue here. Any potential fix for this?

[tjoskar]

@jeffreyramia, same issue? Are you also using ionic and ion-card? Can you open a new issue and describe the issue and maybe share some code?