Ng-lazyload-image: Ionic2-「ion-card」ディレクティブ内で機能しない

作成日 2017年08月22日 · 11コメント · ソース: tjoskar/ng-lazyload-image

やあ、

私はIonic2でこの問題に直面しています。

基本的に、imgタグがion-cardディレクティブ内にある場合、画像はまったく読み込まれず、「defaultImage」のみが表示されます。画像をイオンカードの外側に配置しても問題ありません。

これをご覧いただければお知らせください。

in place.ts
..。
エクスポートクラスPlacePage {

defaultImage：string = ' http：//via.placeholder.com/350x150 ';
場所：任意= {
imgUrl： ' https：//encrypted-tbn0.gstatic.com/images？q = tbn：ANd9GcSSCP8YYuzKCXQLhQ7mkH5I_VpZ0v23BWrJ4QkxSSldl7sOV__xKA'
};

コンストラクター（）{
}

..。
}

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

ありがとう

Wait for feedback

ソース

walfro

全てのコメント11件

やあ、

ion-cordは、ビュー内にありますか、それとも独自のスクロールコンテナを持つものですか？あなたの意見をもっと教えてもらえますか？

tjoskar 2017年08月22日

早速のお返事ありがとうございます。

これが私の見解が基本的に持っているものです：

**すべてが「ion-content」にラップされていますが、何らかの理由でここで適切にフォーマットされていません。

    <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日

これを調べてくれてありがとう、

提供されたコードで試しましたが、違いはありませんでした。イオンコンテンツは問題ではなく、イオンカードが問題である可能性があります。イオンカードの外にimgタグを取得すると、問題なく機能するためです。

自分の側から再現しようとしましたか？あなたがそうしなかった場合に備えて、bitbucketでプロジェクトを共有することができます。

ありがとう

walfro 2017年08月23日

うーん、大丈夫。ええ、私があなたのプロジェクトにアクセスできれば、それはとても素晴らしいことです:)それが近いプロジェクトであるなら、私はビットバケットのユーザー名としてtjoskarています。

tjoskar 2017年08月23日

問題を解決しましたか？この号は今すぐクローズしますが、お気軽に再開してください。

tjoskar 2017年11月05日

無限スクロールに関連する可能性のある同様の問題が発生しています。開発中の私のプロジェクトはhttp://veterinary.communityone.comです。コンテンツを表示するにはログインを作成し、ログインしたらサイドバーからソーシャルフィードをクリックする必要があります。最初のページには画像が表示されますが、無限のスクロールが始まると最初の画像はスピナーに戻り、二度と表示されません。

capture