Ng-lazyload-image: Ionic 2: no funciona dentro de la directiva "tarjeta de iones"

Creado en 22 ago. 2017  ·  11Comentarios  ·  Fuente: tjoskar/ng-lazyload-image

Hola,

Estoy enfrentando este problema con Ionic 2:

Básicamente, lo que está sucediendo es que cuando la etiqueta img está dentro de la directiva de la tarjeta de iones, la imagen no se carga en absoluto, solo muestra la "imagen predeterminada". Colocando la imagen fuera de la tarjeta de iones, funciona bien.

Por favor, avíseme si puede echarle un vistazo a esto.

in place.ts
...
export class PlacePage {

defaultImage: string = ' http://via.placeholder.com/350x150 ';
lugar: cualquiera = {
imgUrl: ' https://encrypted-tbn0.gstatic.com/images?q=tbn : ANd9GcSSCP8YYuzKCXQLhQ7mkH5I_VpZ0v23BWrJ4QkxSSldl7sOV__xKA'
};

constructor () {
}

...
}

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

Gracias

Wait for feedback

Todos 11 comentarios

Hola,

¿Están los ion-cord dentro de alguna vista o algo que tenga su propio contenedor de desplazamiento? ¿Puedes darme más de tu opinión?

Gracias por la rápida respuesta.

Esto es lo que básicamente tiene mi punto de vista:

** todo eso envuelto en un "contenido de iones" pero por alguna razón no se formatea correctamente aquí.



    <ion-card-content>
        <ion-card-title>
            <div>{{place.name}}</div>
        </ion-card-title>
        <div>
            Some content here ....
        </div>
    </ion-card-content>
</ion-card>

Creo que ion-content puede ser el problema. ng-lazyload-image están usando window por defecto para eventos de desplazamiento, pero ion-content está usando su propio contenedor de desplazamiento, por lo que debemos escuchar el evento de desplazamiento en ion-content .

¿Puedes intentar usar la siguiente plantilla?

<ion-content #container>
  <ion-card>
    <img defaultImage]="defaultImage" [lazyLoad]="place.imgUrl" [scrollTarget]="container.scrollElement" />
    you content
  </ion-card>
</ion-content>

Gracias por mirar en esto,

He intentado con el código proporcionado pero no hice ninguna diferencia, creo que el contenido de iones no es el problema y la tarjeta de iones podría serlo, porque si saca la etiqueta img fuera de la tarjeta de iones, funciona bien.

¿Intentaste reproducirlo desde tu lado? Podría compartir un proyecto en bitbucket en caso de que no lo hicieras.

Gracias

Humm, está bien. Sí, sería muy bueno si pudiera tener acceso a su proyecto :) Estoy usando tjoskar como nombre de usuario en bitbucket si es un proyecto cerrado.

¿Resolviste el problema? Cerraré este problema ahora, pero no dudes en volver a abrirlo.

Tengo un problema similar que puede estar relacionado con el desplazamiento sin fin. Mi proyecto en desarrollo es http://veterinary.communityone.com , tendrías que crear un inicio de sesión para ver el contenido y luego hacer clic en las redes sociales de la barra lateral una vez que hayas iniciado sesión. La página inicial muestra la imagen bien, pero una vez que comienza el desplazamiento sin fin la primera imagen vuelve a ser una ruleta y nunca vuelve a aparecer.

capture

@jcbowyer , acabo de crear una cuenta pero no pude reproducir el problema. Solo hice tres publicaciones y no obtuve ningún scroll infinito.

Gracias, finalmente cambié algo y comenzó a funcionar. No estoy seguro de qué lo solucionó exactamente

@tjoskar El mismo problema aquí. ¿Alguna solución potencial para esto?

@jeffreyramia , ¿mismo problema? ¿También estás usando iónico y ion-card ? ¿Puede abrir un nuevo problema y describir el problema y tal vez compartir algún código?

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

el-davo picture el-davo  ·  4Comentarios

myrsk picture myrsk  ·  6Comentarios

stratio84 picture stratio84  ·  6Comentarios

audacitus picture audacitus  ·  5Comentarios

kodeine picture kodeine  ·  7Comentarios