Ng-lazyload-image: No se puede enlazar a 'lazyload' ya que no es una propiedad nativa conocida

Creado en 9 sept. 2016 · 5Comentarios · Fuente: tjoskar/ng-lazyload-image

Estoy ejecutando un proyecto Ionic 2 existente (2.0.0-beta.11, usando Angular 2.0.0-rc.4). Instalado y configurado, pero sigue recibiendo el siguiente error (El error ocurre en tiempo de ejecución. No hay problema al compilar)

Pasos que tomé:

Corrió Npm:
$ npm install ng2-lazyload-image --save

Importado a mi componente:
import { LazyLoadImageDirective } from 'ng2-lazyload-image';

Establecer directivas:
directives: [ LazyLoadImageDirective ]

Establecer variables y valores predeterminados:

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

En mi plantilla:
<img [src]="defaultImage" [lazyload]="feedImage" [offset]="offset" class="feed-image">

Quizás hay algo que estoy pasando por alto, pero parece que no puedo ver qué es.

Fuente

audacitus

Comentario más útil

Cometiste un error tipográfico.
Es [lazyLoad], no [lazyload]

Salud :)

StanFaas en 17 oct. 2016

👍3

Todos 5 comentarios

Hola,

No puedo reproducir el problema. ¿Qué versión de ng2-lazyload-image estás usando? ¿Es su proyecto de código abierto para que pueda echarle un vistazo?

Pasos que tomé:

$ 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

Actualizado el código:

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

Y funciona bien :)

SIN EMBARGO, dado que ionic usa pestañas (por defecto) y agrega display: none en el contenedor de desplazamiento, hace que sea casi imposible determinar si la imagen está inicialmente en la ventana gráfica o no. Debería ser bueno usar algo como el observador de intersecciones, pero solo funciona en Chrome y si apunta a iOS, usará Safari: /

Sin embargo, una solución es verificar si la imagen está oculta (por ejemplo: el.offsetParent === null ) pero cuando la imagen se vuelve visible nuevamente, ng2-lazyload-image no recibirá ninguna notificación y SI la imagen está en la ventana gráfica, el La imagen no aparecerá antes de que el usuario comience a desplazarse. Sin embargo, puede usar *ngIf para eso:

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

Pero eso no se ve nada bien: /

Así que .. que puede o no ser capaz de utilizar ng2-lazyload-image en su aplicación iónico (dependiendo de la distribución), pero no debe someterse a cualquier error de tiempo de ejecución.

tjoskar en 11 sept. 2016

Cometiste un error tipográfico.
Es [lazyLoad], no [lazyload]

Salud :)

StanFaas en 17 oct. 2016

👍3

Eso suena vergonzosamente simple.
Me actualizaré al rc1 y lo probaré. Gracias.

El lunes 17 de octubre de 2016 a la 1:37 p.m., Stan Faas [email protected] escribió:

Cometiste un error tipográfico.
Es [lazyLoad], no [lazyload]
Salud :)
-
Estás recibiendo esto porque eres el autor del hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/tjoskar/ng2-lazyload-image/issues/37#issuecomment -254195387,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/APPh0par6NR7EA3DA1GbibncX8gCb2YRks5q02wTgaJpZM4J5EjU
.