Ng-lazyload-image: Tidak dapat mengikat 'lazyload' karena ini bukan properti asli yang diketahui

Dibuat pada 9 Sep 2016 · 5Komentar · Sumber: tjoskar/ng-lazyload-image

Saya sedang menjalankan proyek Ionic 2 yang sudah ada (2.0.0-beta.11, menggunakan Angular 2.0.0-rc.4). Diinstal dan diatur, tetapi tetap mendapatkan kesalahan berikut (Kesalahan terjadi saat runtime. Tidak ada masalah saat kompilasi)

Langkah-langkah yang saya ambil:

Jalankan Npm:
$ npm install ng2-lazyload-image --save

Diimpor ke komponen saya:
import { LazyLoadImageDirective } from 'ng2-lazyload-image';

Tetapkan Arahan:
directives: [ LazyLoadImageDirective ]

Setel variabel dan default:

export class PostComponent {
defaultImage: any = 'build/assets/preloader.gif';
offset = 100;
@Input() feedImage: string = 'build/assets/blank-default-feed-bg.png';
}

Dalam templat saya:
<img [src]="defaultImage" [lazyload]="feedImage" [offset]="offset" class="feed-image">

Mungkin ada sesuatu yang saya abaikan, tapi sepertinya saya tidak bisa melihat apa itu.

Sumber

audacitus

Komentar yang paling membantu

Anda salah ketik.
Ini [lazyLoad], bukan [lazyload]

Bersulang :)

StanFaas pada 17 Okt 2016

👍3

Semua 5 komentar

Hai,

Saya tidak dapat mereproduksi masalah. Versi ng2-lazyload-image apa yang Anda gunakan? Apakah proyek Anda open source sehingga saya bisa melihatnya?

Langkah-langkah yang saya ambil:

$ npm install -g ionic<strong i="8">@beta</strong>
$ ionic --version
2.0.0-beta.37
$ ionic start ionic-lazy-load-images --v2
$ cd ionic-lazy-load-images
$ npm install [email protected] --save
$ ionic serve

Memperbarui kode:

`app/pages/home/home.html:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home" #container>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p style="height: 1000px;">
    Take a look at the <code>app/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <img
    style="height: 1099px;"
    [src]="defaultImage"
    [lazyLoad]="image"
    [offset]="offset"
    [scrollTarget]="container._scroll._el">
</ion-content>

`app/pages/home/home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LazyLoadImageDirective } from 'ng2-lazyload-image';

@Component({
  templateUrl: 'build/pages/home/home.html',
  directives: [ LazyLoadImageDirective ]
})
export class HomePage {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://hd.unsplash.com/photo-1441765425173-8fd330fb4a02';
  offset = 100;

  constructor(private navCtrl: NavController) {
  }
}

Dan itu berfungsi dengan baik :)

NAMUN, karena ionic menggunakan tab (per default) dan menambahkan display: none pada wadah gulir, hampir tidak mungkin untuk menentukan apakah gambar awalnya di viewport atau tidak. Seharusnya menyenangkan menggunakan sesuatu seperti pengamat persimpangan tetapi hanya berfungsi di Chrome dan jika Anda menargetkan iOS, Anda akan menggunakan Safari:/

Namun salah satu solusinya adalah memeriksa apakah gambar disembunyikan (misalnya: el.offsetParent === null ) tetapi ketika gambar terlihat lagi, ng2-lazyload-image tidak akan menerima pemberitahuan apa pun dan JIKA gambar ada di viewport, gambar tidak akan muncul sebelum pengguna mulai menggulir. Namun Anda dapat menggunakan *ngIf untuk itu:

<img
    *ngIf="container._scroll._el.offsetParent !== null"
    style="height: 1099px;"
    [src]="defaultImage"
    [lazyLoad]="image"
    [offset]="offset"
    [scrollTarget]="container._scroll._el">

Tapi itu tidak terlihat bagus :/

Jadi.. Anda mungkin atau mungkin tidak dapat menggunakan ng2-lazyload-image di aplikasi ionik Anda (tergantung pada tata letak Anda) tetapi Anda seharusnya tidak mendapatkan kesalahan runtime.

tjoskar pada 11 Sep 2016

Anda salah ketik.
Ini [lazyLoad], bukan [lazyload]

Bersulang :)

StanFaas pada 17 Okt 2016

👍3

Kedengarannya sangat sederhana.
Saya akan meningkatkan ke rc1 dan mencobanya. Terima kasih.

Pada Senin, 17 Oktober 2016 pukul 13.37, Stan Faas [email protected] menulis:

Anda salah ketik.
Ini [lazyLoad], bukan [lazyload]
Bersulang :)
—
Anda menerima ini karena Anda yang menulis utas.
Balas email ini secara langsung, lihat di GitHub
https://github.com/tjoskar/ng2-lazyload-image/issues/37#issuecomment -254195387,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/APPH0par6NR7EA3DA1GbibncX8gCb2YRks5q02wTgaJpZM4J5EjU
.