Ng-lazyload-image: デフォルトの画像は表示されません

こんにちは、

サンプルページは、次のcssスタイルを使用していました。

img {
  opacity: 0;
}
img.ng2-lazyloaded {
  opacity: 1;
}

たとえば、遅延読み込みされた画像が読み込まれるまで、画像（およびデフォルトの画像）を非表示にすることを目的としていました。

ただし、 opacity: 0;を削除すると、遅延読み込みされた画像が読み込まれる前にデフォルトの画像が表示されるはずです。

サンプルページをさらにいくつかの例で更新しました。 http://tjoskar.github.io/ng2-lazyload-image/にアクセスし、[デフォルトの画像]をクリックして、デフォルトの画像の使用例を確認してください。
Chromeを使用している場合は、開発ツールの「ネットワークスロットリング」を使用して、より長い読み込み時間をシミュレートすることもできます。

私はあなたの質問に答えましたか？

ここにサンプルコードがあります： https ：

@tjoskarすべてを試しましたが、まだ機能していません。デフォルトの画像がまったく表示されません。レイジーローダーの画像をデフォルトの画像に置き換えてデフォルトの画像を読み込んだ場合、問題はチェックしたときに発生するため、パスは正しいです。 google chrome inspectorツール、デフォルトの画像が画像のsrc属性に添付されている場所がないことがわかります。代わりに、lazyloader画像がデフォルトで添付されています。 これを回避する他の方法はありますか？ 反応を待っています。

ありがとう

@kelvinrolex 、私がフォローしているのか

1. デフォルトの画像をsrc設定します
2. 画像がビューポートにあるかどうかを確認します

2.1画像がビューポートにある場合は、レイジーロードされた画像のダウンロードを開始します
2.1.1レイジーロードされたイメージがダウンロードされるとき、レイジーロードされたイメージをsrc
2.2それ以外の場合は2に進みます

デフォルトの画像がどのように読み込まれるかを示すビデオを録画しました： https ：

共有できるコードスニペットがありますか。そうすれば、あなたがやろうとしていることをよりよく理解できます。

ありがとう

同じ問題があるようです。 [src] = "defaultImage"を使用する場合（そしてもちろんdefaultImageプロパティがあります）、画像が読み込まれる（ビューポートに入る）前にimgタグのsrc属性が書き込まれません。

プロパティバインディングを使用しない場合（例：

@taseroth 、返信が遅くなってすみません。 どのブラウザとOSを使用していますか？ macOSのChrome / Firefox / Safariでこれを再現することはできません。
ただ明確にします; http://tjoskar.github.io/ng2-lazyload-image/fade-in-imageにアクセスし、「デフォルトの画像」リンクを押した場合。 ニコラス・ケイジの写真を見ていませんか？

同じ問題があります。 デフォルトの画像はうなずいてレンダリングされます（「src」とハードコードされたプレースホルダーURLを使用して明示的に配置した場合のみ）。
また、「scrollspy」が正しく機能していないことに気づきました。lasyloadが最初の2つまたは3つの要素をロードすることがあります。
XDを「強烈に」スクロールした後でも、他のすべてのスタイルは変更されません。 オフセットパラメータはこの問題に影響を与えていないようです。 1つのトリックがあります：コンテナがロードされる前にページを再ロードして下にスクロールすると、すべての画像がロードされます...
コンソールまたはコンパイル中にエラーは発生しません。

@ bsh314 、私はフォローしていません。

デフォルトの画像はうなずいてレンダリングされます（「src」とハードコードされたプレースホルダーURLを使用して明示的に配置した場合のみ）。

デフォルトの画像にはsrcを使用する必要があります。
次のコードを使用しているとしましょう： <img [src]="defaultImage" [lazyLoad]="image"> 。 Angularはそれをコンパイルしてブラウザに<img src="default-image.jpg">を渡し（ defaultImage = 'default-image.jpg'場合）、画像がビューポートにある場合、ディレクティブ（ng2-lazyload）は画像ノードを<img src="lazyload-image.jpg">更新しますimage = 'lazyload-image.jpg'与えられた場合）。

また、「scrollspy」が正しく機能していないことに気づきました...

ブートストラップscrollspyを参照していますか？ scrollspyなしでエラーを再現できますか？

@tjoskarいいえ、私はブートストラップを使用していません。これは、そのタイプの機能に名前を付ける唯一の方法でした。
私のデフォルトの画像の問題：
<img src="default-image.jpg" [lazyLoad]="image"> ->これは機能します
<img [src]="defaultImage" [lazyLoad]="image"> ->これは機能しません
返信いただきありがとうございます！

私も同じ問題を抱えてる。 テンプレートにimgurlがハードコーディングされている場合にのみ機能します。
あなたの例ではそれをハードコーディングしています：

// https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/default-image.component.ts
<img
        *ngFor="let image of images"
        src="https://www.placecage.com/1000/1000"
        [errorImage]="errorImage"
        [lazyLoad]="image">

編集：そして、AOTがURLをテンプレートにハードコーディングできる場合にも機能する可能性があります。 私の場合、以前のAPI呼び出しからデフォルトの画像URLを取得しているため、動的です。 私の目標は、デフォルトの画像を低品質のプレビューとして使用し、高品質の画像を遅延読み込みして置き換えることです。

@filipsuk ：

この問題はバージョン2.3.2で解決されるはずです。 ぜひお試しください。

@tjoskar問題は2.3.2で修正されたようです。 本当にありがとうございました！ :)

これを閉じます。 まだ問題が発生している方がいらっしゃいましたらお知らせください。