Ng-lazyload-image: Impossible de se lier à 'lazyload' car ce n'est pas une propriété native connue

Créé le 9 sept. 2016 · 5Commentaires · Source: tjoskar/ng-lazyload-image

J'exécute un projet Ionic 2 existant (2.0.0-beta.11, en utilisant Angular 2.0.0-rc.4). Installé et configuré, mais continuez à obtenir l'erreur suivante (l'erreur se produit lors de l'exécution. Aucun problème lors de la compilation)

Mesures que j'ai prises :

Exécuté Npm :
$ npm install ng2-lazyload-image --save

Importé dans mon composant :
import { LazyLoadImageDirective } from 'ng2-lazyload-image';

Définir des directives :
directives: [ LazyLoadImageDirective ]

Définir les variables et les valeurs par défaut :

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

Dans mon modèle :
<img [src]="defaultImage" [lazyload]="feedImage" [offset]="offset" class="feed-image">

Il y a peut-être quelque chose que j'oublie, mais je n'arrive pas à voir ce que c'est.

Source

audacitus

Commentaire le plus utile

Vous avez fait une faute de frappe.
C'est [lazyLoad], pas [lazyload]

Acclamations :)

StanFaas le 17 oct. 2016

👍3

Tous les 5 commentaires

Salut,

Je ne peux pas reproduire le problème. Quelle version de ng2-lazyload-image utilisez-vous ? Votre projet est-il open source pour que je puisse y jeter un œil ?

Mesures que j'ai prises :

$ 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

Mise à jour du code :

`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) {
  }
}

Et ça marche bien :)

CEPENDANT, étant donné qu'ionic utilise des onglets (par défaut) et ajoute display: none sur le conteneur de défilement, il est presque impossible de déterminer si l'image est initialement dans la fenêtre d'affichage ou non. Il devrait être agréable d'utiliser quelque chose comme intersection observer mais cela ne fonctionne que dans Chrome et si vous ciblez iOS, vous allez utiliser Safari :/

Une solution est cependant de vérifier si l'image est masquée (ex : el.offsetParent === null ) mais lorsque l'image redeviendra visible, ng2-lazyload-image ne recevra aucune notification et SI l'image est dans la fenêtre, le l'image ne s'affichera pas avant que l'utilisateur ne commence à faire défiler. Vous pouvez cependant utiliser *ngIf pour cela :

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

Mais ça n'a pas l'air bien :/

Donc, vous pourriez ou non pouvoir utiliser ng2-lazyload-image dans votre application ionique (selon votre mise en page), mais vous ne devriez

tjoskar le 11 sept. 2016

Vous avez fait une faute de frappe.
C'est [lazyLoad], pas [lazyload]

Acclamations :)

StanFaas le 17 oct. 2016

👍3

Cela semble d'une simplicité embarrassante.
Je vais passer au rc1 et l'essayer. Merci.

Le lundi 17 octobre 2016 à 13 h 37, Stan Faas [email protected] a écrit :

Vous avez fait une faute de frappe.
C'est [lazyLoad], pas [lazyload]
Acclamations :)
-
Vous recevez ceci parce que vous avez créé le fil.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/tjoskar/ng2-lazyload-image/issues/37#issuecomment -254195387,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/APPh0par6NR7EA3DA1GbibncX8gCb2YRks5q02wTgaJpZM4J5EjU
.