Ng-lazyload-image: Ionic 2 - ne fonctionne pas dans la directive "ion-card"

Créé le 22 août 2017  ·  11Commentaires  ·  Source: tjoskar/ng-lazyload-image

Salut,

Je suis confronté à ce problème avec Ionic 2:

Fondamentalement, ce qui se passe, c'est que lorsque la balise img est à l'intérieur de la directive ion-card, l'image ne se charge pas du tout, elle ne montre que le "defaultImage". En positionnant l'image à l'extérieur de la carte ionique, cela fonctionne correctement.

S'il vous plaît laissez-moi savoir si vous pouvez jeter un oeil à cela.

en place.ts
...
classe d'exportation PlacePage {

defaultImage : chaîne = ' http://via.placeholder.com/350x150 ';
lieu : quelconque = {
imgUrl : ' https://encrypted-tbn0.gstatic.com/images?q=tbn :ANd9GcSSCP8YYuzKCXQLhQ7mkH5I_VpZ0v23BWrJ4QkxSSldl7sOV__xKA'
} ;

constructeur() {
}

...
}

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

Merci

Wait for feedback

Tous les 11 commentaires

Salut,

Les ion-cord dans une vue ou quelque chose qui a son propre conteneur de défilement ? Pouvez-vous me donner plus de votre point de vue?

Merci pour la réponse rapide.

Voici ce que mon point de vue a essentiellement:

** tout ce qui est enveloppé dans un "contenu ionique" mais pour une raison quelconque n'est pas correctement formaté ici.



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

Je pense que ion-content peut être le problème. ng-lazyload-image utilisent window par défaut pour les événements de défilement, mais ion-content utilise leur propre conteneur de défilement, nous devons donc écouter les événements de défilement sur ion-content .

Pouvez-vous essayer d'utiliser le modèle suivant :

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

Merci d'avoir étudié cela,

J'ai essayé avec le code fourni mais cela n'a fait aucune différence, je pense que le contenu ionique n'est pas le problème et la carte ionique pourrait l'être, car si vous prenez la balise img en dehors de la carte ionique, cela fonctionne très bien.

As-tu essayé de le reproduire de ton côté ? Je pourrais partager un projet dans bitbucket au cas où vous ne l'auriez pas fait.

Merci

Hum, d'accord. Ouais, ce serait super sympa si je pouvais accéder à votre projet :) J'utilise tjoskar comme nom d'utilisateur sur bitbucket s'il s'agit d'un projet proche.

Avez-vous résolu le problème ? Je vais fermer ce sujet maintenant mais n'hésitez pas à le rouvrir.

J'ai un problème similaire qui peut être lié au défilement sans fin. Mon projet en développement est http://veterinary.communityone.com , vous devrez créer un identifiant pour voir le contenu, puis cliquer sur le flux social dans la barre latérale une fois connecté. La page initiale montre l'image correctement mais une fois que le défilement sans fin commence la première image redevient un spinner et n'apparaît plus jamais.

capture

@jcbowyer , je viens de créer un compte mais je n'ai pas pu reproduire le problème. Je n'ai publié que trois messages et je n'ai pas obtenu de parchemin infini.

Merci, j'ai finalement changé quelque chose et cela a commencé à fonctionner. Je ne sais pas exactement ce qui l'a réparé

@tjoskar Même problème ici. Une solution potentielle pour cela?

@jeffreyramia , même problème ? Utilisez-vous également ionic et ion-card ? Pouvez-vous ouvrir un nouveau problème et décrire le problème et peut-être partager du code ?

Cette page vous a été utile?
0 / 5 - 0 notes