Ng-lazyload-image: Ionic 2 - 不在“离子卡”指令内工作

创建于 2017-08-22 · 11评论 · 资料来源: tjoskar/ng-lazyload-image

你好呀，

我在使用 Ionic 2 时遇到了这个问题：

基本上，发生的事情是当 img 标签在 ion-card 指令内时，图像根本没有加载，它只显示“defaultImage”。将图像定位在离子卡之外它工作正常。

如果你能看看这个，请告诉我。

就地.ts
...
导出类 PlacePage {

defaultImage: string = ' http://via.placeholder.com/350x150 ';
地点：任何= {
imgUrl: ' https://encrypted-tbn0.gstatic.com/images?q=tbn :ANd9GcSSCP8YYuzKCXQLhQ7mkH5I_VpZ0v23BWrJ4QkxSSldl7sOV__xKA'
};

构造函数（）{
}

...
}

就地.html：
<ion-card> <img [defaultImage]="defaultImage" [lazyLoad]="place.imgUrl" /> ..... </ion-card>

谢谢

Wait for feedback

资料来源

walfro

所有11条评论

你好，

ion-cord在某个视图中还是任何有自己滚动容器的东西？你能给我更多你的看法吗？

tjoskar 于 2017-08-22

感谢您的快速回复。

以下是我的基本观点：

** 包含在“离子内容”中的所有内容，但由于某种原因，这里没有正确格式化。

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

walfro 于 2017-08-22

我认为ion-content可能是问题所在。 ng-lazyload-image默认使用window来处理滚动事件，但ion-content使用他们自己的滚动容器，所以我们需要监听ion-content上的滚动事件。

您可以尝试使用以下模板：

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

tjoskar 于 2017-08-23

感谢您查看这个，

我已尝试使用提供的代码但没有任何区别，我认为 ion-content 不是问题，而 ion-card 可能是，因为如果您将 img 标签放在 ion-card 之外，它就可以正常工作。

你有没有尝试从你身边重现它？如果你没有，我可以在 bitbucket 中共享一个项目。

谢谢

walfro 于 2017-08-23

嗯，好的。是的，如果我可以访问您的项目，那就太好了 :) 如果它是一个关闭的项目，我将在 bitbucket 上使用tjoskar作为用户名。

tjoskar 于 2017-08-23

你解决问题了吗？我现在将关闭此问题，但随时可以重新打开它。

tjoskar 于 2017-11-05

我有一个类似的问题，可能与无限滚动有关。我正在开发的项目是http://veterinary.communityone.com ，您必须创建登录才能查看内容，然后在登录后单击侧边栏中的社交提要。初始页面显示的图像很好，但一旦开始无限滚动第一个图像恢复为微调器，再也不会出现。

capture

jcbowyer 于 2017-12-18

@jcbowyer ，我刚刚创建了一个帐户，但无法重现该问题。我只有三个帖子，并没有得到任何无限滚动。

tjoskar 于 2017-12-30

谢谢我最终改变了一些东西，它开始工作了。我不确定到底是什么修复了它

jcbowyer 于 2017-12-30

😕1 👎1 👍1

@tjoskar这里有同样的问题。对此有任何潜在的解决方法吗？

jeffreyramia 于 2018-04-29

@jeffreyramia ，同样的问题？您是否也在使用 ionic 和ion-card ？您可以打开一个新问题并描述该问题并分享一些代码吗？

tjoskar 于 2018-04-30

此页面是否有帮助？

0 / 5 - 0 等级

Ng-lazyload-image: Ionic 2 - 不在“离子卡”指令内工作

所有11条评论

相关问题