Ionic-framework: ion-img dans virtualScroll n'affiche pas les images comme prévu

Je peux confirmer ce problème. Je constate un comportement similaire dans mon application et j'utilise également Ionic Framework 3.0.1.

L'étude du DOM pendant le défilement montre que l'attribut class de certains composants ion-image passe de "img-loaded" à "img-unloaded" bien que les composants soient toujours dans la fenêtre visible.

Bonjour à tous! Est-ce que cela vous dérangerait d'essayer le dernier soir et de voir si c'est toujours un problème là-bas ? Pour installer le nightly de ionic-angular vous pouvez exécuter npm install ionic-angular<strong i="6">@nightly</strong> --save dans votre projet. Merci!

Oui, ça se passe toujours :(

Pour moi aussi. Le problème persiste avec la nuit actuelle.

ça arrive aussi avec *ngFor

J'ai ce que je suppose être un problème connexe. Mes images pour les vignettes sont toutes de hauteurs différentes et 300px de large. Celles-ci étaient auparavant recadrées comme prévu dans la v2, désormais aucune image n'apparaît.

Idem ici .. devenu vide avec une liste de vignettes de 80x80px

    <ion-list [virtualScroll]="place.uploads" [approxItemHeight]=" '80px' ">
        <ion-icon name="images" margin-right></ion-icon>
        Photos
        <div *virtualItem="let photo">
            <ion-img width="80" height="80" [src]="photo.thumbnail_url"></ion-img>
        </div>
    </ion-list>

environnement.txt
Ne semble pas être guéri en utilisant 3.1.0?
Utilisé 'ionic serve' sur Chrome de bureau (Win 10) pour tester.
Beaucoup de cercles gris au lieu d'images jusqu'à ce que certaines images défilent vers le bas, puis reviennent aux cercles gris ...

Cordoue CLI : 6.5.0
Version du cadre ionique : 3.1.0
Version ionique de la CLI : 2.2.2
Version de l'application Ionic Lib : 2.2.1
Version des scripts d'applications ioniques : 1.3.4
version ios-deploy : non installée
Version ios-sim : Non installé
Système d'exploitation : Windows 10
Version du nœud : v6.10.0
Version Xcode : Non installé

J'ai également essayé de mettre à jour vers la 3.1.0 -> le problème est toujours présent

Pour mémoire - essayé 3.1.1 - toujours un problème.

J'ai aussi essayé 3.1.1 - toujours un problème.

C'est un vieux problème - présent depuis RC4 - toutes les infos se trouvent dans le #9660

@jgw96 vous pouvez facilement reproduire avec Ionic 3.1.1 ici https://github.com/shprink/ionic-withwebworker-vs-withoutwebworker

Pour mémoire, j'ai un composant dont j'aimerais créer des fonctionnalités similaires à celles utilisant canvas. :)
Quelqu'un peut-il créer un composant "ion-canvas" commun pour le chargement paresseux ? :)

j'ai le même problème :/

avoir le même problème :)

Bonjour, j'ai le même problème, dans mon cas... les premières images ne s'affichent pas... alors si je fais défiler vers le bas vers le bas, les images commencent à apparaître mais seulement celles qui sont en bas... le défilement vers le haut ne fait pas apparaître les premières images...

  <ion-list [virtualScroll]="playList" [approxItemHeight]="imageSize + 'px'" [approxItemWidth]="imageSize + 'px'" [bufferRatio]=10>
        <div *virtualItem="let post" [style.width]="imageSize + 'px'" [style.height]="imageSize + 'px'">
          <ion-img [src]="element.pathToImage" [width]="imageSize+ 'px'" [height]="imageSize + 'px'"  ></ion-img>
        </div>
      </ion-list>

Voici le code html lorsqu'ils ne s'affichent pas :
<ion-img class="img-unloaded" ng-reflect-src="assets/img/1.jpg" ng-reflect-width="705px" ng-reflect-height="705px"> <img> </ion-img>
lors de l'affichage :
<ion-img class="img-unloaded" ng-reflect-src="assets/img/1.jpg" ng-reflect-width="705px" ng-reflect-height="705px" style="width: 705px; height: 705px;"> <img src="assets/img/1.jpg" alt=""> </ion-img>

J'ai trouvé le bogue. Dans ce commentaire https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 sont deux solutions de contournement possibles pour cela.

Je reçois également cela, comme expliqué ici. Ce plunk démontre également le problème.

Pareil ici. Toujours le problème

$ ionic info

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v6.11.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.3.0

Je voyais ce problème mais je l'ai résolu avec ce hack de style temporaire :

   <ion-list [virtualScroll]="items">
        <ion-item *virtualItem="let item" style="overflow:hidden;width:300px;height:300px;">
            <ion-img [src]="item.url" [cache]="true" [width]="item.width" [height]="item.height"></ion-img>
        </ion-item>
    </ion-list>

et cette règle css :

    ion-label {
        height: 100%;
    }

Je ne dis pas que c'est LA solution mais fait disparaître le problème.

Toujours pas corrigé. Aucune des solutions de contournement suggérées ici et dans un autre problème ne fonctionne correctement. Comment sommes-nous censés faire défiler en douceur une liste de centaines de petites vignettes lorsque le défilement infini en remplacement n'est pas une option ? C'est un cas d'utilisation très basique sur mobile...

Vous pouvez utiliser l'image indépendante ng-lazyload-image. Cela me semble fonctionner, je dois juste vérifier un certain temps de chargement, car pour moi c'était un peu lourd. (peut-être pour une raison différente, ce que j'ai déjà résolu - la toile ne devrait pas passer en défilement ionique, car elle était très instable)

Comme j'ai un calendrier de projet strict, je pourrais jeter un œil à ce bogue ennuyeux plus tard.
J'ai réalisé que ce n'était pas grave. J'ai fait un correctif natif ionique, tout à l'heure.

Vous (bubbleguuum) pouvez également le déboguer, si vous souhaitez apprendre des choses. Ce n'était peut-être pas si grave, mais personne ne l'avait regardé. (je pense qu'une refonte est en cours, mais la correction de bogue temporaire aurait dû être publiée) Je suis un développeur indépendant, donc si vous le corrigez, je serai heureux, que je n'en ai pas besoin. :)

Quoi qu'il en soit, Angular a besoin de messages d'erreur significatifs, la plupart des problèmes viennent de là.
La trace de suivi n'affiche pas l'appelant de votre application, juste une sorte d'erreurs de webpack/promesse toujours d'un niveau plus profond.

C'est incroyable que cela ne fonctionne pas. @bubbleguuum l'a frappé sur la tête.

C'est absolument inacceptable. À peu près, chaque application nécessite la fonctionnalité en question qui ne fonctionne pas. Aussi qu'il y ait un problème #9660 de décembre 2016 et qu'il n'est toujours pas résolu est troublant... :(

J'ai également le même problème. J'ai utilisé le json pour obtenir les données et *ngFor pour afficher les données sur le frontend. Mais, il semble que la balise img dans ion-img reste vide pour certaines raisons.

        <ion-item *ngFor="let product of products">
            <span class="ratings">{{product.brand}}</span>
            <ion-img src="assets/images/user_quest.png" width="40" height="22" class="user_quest"></ion-img>
            <ion-img src="{{product.img}}" width="90" height="115"></ion-img>
            <div text-center margin-top margin-bottom>
            </div>
            <p class="brand_name">{{product.brand}}</p>
            <p class="product_name">{{product.name}}</p>
            <p class="product_price">10 &euro;</p>
            <div text-center margin-top>
                <button ion-button color="light" class="add_cart_btn" icon-end>Add to cart</button>
            </div>
        </ion-item>

mais le résultat est comme ça

J'ai aussi le même problème que le gars au dessus de moi.
C'est le code

C'est la sortie

J'ai eu un problème similaire il y a quelque temps. J'ai résolu mon problème en utilisant la fonction map array pour modifier l'URL de l'image. Vous avez donc besoin de quelque chose comme : -

et dans le fichier .ts

this.pizzaList = this.pizzaList.map((pizzas)=>{
pizzas.imgUrl = "./assets/" + pizzas.imgUrl + ".jpg" ;
retourner les pizzas
});

J'utilise la fonction map en appelant le service :
Le service

Le fichier .ts

J'ai également le même problème dans un fichier *ngfor. je passe à en attendant une solution !!

ça ne marche pas, quelle est la solution ?!?

@karimessouabni j'ai une solution à ce problème. Nous pouvons utiliser directement la balise img pour éviter une image vide.
<img src="{{product.img}}">

@ shahid27125 ce n'est pas la solution car toutes les images seront chargées instantanément. Avoir une liste avec plus de 100 éléments avec des images épuisera les performances et les données mobiles si vous le faites.

@fdambrosio Dans ce commentaire https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 sont deux solutions de contournement possibles pour cela.

merci @DavidWiesner

Encore un développeur frustré qui intervient... Sérieusement les gars, réparez cette merde.

Je suis d'accord avec @tomcatmwi

Avez-vous l'intention de résoudre ce problème ?

Wow, je n'arrive pas à croire combien de temps les gens attendent ça... En attendant un correctif maintenant, aussi.

Pour tous ceux qui ne s'intéressent qu'au chargement de l'image, vous pouvez consulter le module ng2-lazyload-image. https://www.npmjs.com/package/ng2-lazyload-image

Je l'utilise avec des milliers de lignes en production et cela semble bien fonctionner.

Eh bien, ce n'est pas tout à fait vrai :

1. d'abord, vous devrez mettre à jour votre composant (c'est-à-dire, si vos éléments sont en fait des composants personnalisés)
2. chaque composant a alors besoin de sa propre référence à la teneur en ions
3. bien sûr, les premières images ne se chargent pas tant que vous ne faites pas défiler
4. à quel état, vous commencez à penser à supprimer la liste virtuelle que vous utilisez également
6. git checkout .
7. commencez à espérer que l'équipe ionique @adamdbradley remarque que le problème n'est pas résolu depuis début 2017.
8. attendre le correctif.

Toujours le même bug..

Sameeeeeeee ici

Ouais encore un bug.
J'attends un correctif. En attendant, je vais utiliser ceci : https://www.npmjs.com/package/ng-lazyload-image

S'il y a une meilleure solution, n'hésitez pas à me le dire :)

Remplacez <ion-img [src]="url"></ion-img> par <img [src]="url"> Fonctionne pour moi

Avoir ce problème aussi. @dm-grinko utilisant img ne prend pas en charge le chargement paresseux, ce qui est important si vous avez beaucoup d'images.

J'avais des images dans le tableau que j'avais téléchargées à partir du serveur maintenant je veux les montrer danset utilisez le défilement virtuel, mais les images ne sont pas rendues, seules 1 à 2 images sont affichées.
voici mon code.

<ion-list [virtualScroll]="Images">
<ion-item *virtualItem="let item">
          <ion-img src="data:image/*;base64,{{item.ImageValue}}" style="height: auto; width: auto;">
</ion-img>
              </ion-item>
</ion-list>

@husainsr change ion-img en img
ion-img ne fonctionne pas

<img> ne fonctionne pas non plus dans virtualscroll car j'avais un tableau dans lequel la valeur de l'image est stockée dans la chaîne base64.

Incroyable... Je pense que je serai rapide pour amener toute mon équipe et mes projets à React Native.
Il est scandaleux de voir que ce bug n'est toujours pas corrigé.
Au lieu de travailler sur Ionic 4, ce serait bien d'assurer des livraisons de première qualité.

du travail autour des gars?

une solution @ionic Team???

Pour être honnête, l'équipe ionic a un beau projet indépendant, comme un condensateur, qui m'a été utile lorsque j'ai décidé de créer mon propre cadre. La nouvelle fonctionnalité de défilement virtuel ionique n'a pas changé, juste convertie en pochoir (composant Web, accélération, non pris en charge par tout le monde, problèmes de safari hws), alors n'attendez pas trop la v4. Cette implémentation de défilement virtuel est très basique. (bug de changement d'orientation de l'écran, éléments variables, problèmes de chargement paresseux, trop rigide, essayez de résoudre les problèmes, ce que fait le navigateur) En 2016, quand j'avais peu de connaissances même sur Angular, bien que je sois dans l'industrie depuis des décennies, c'était très difficile de faire un cadre. Mon intuition est que les projets open source devraient être publiés 3 cycles après, lorsque les concepts de base sont en place. C'est vrai pour angulaire aussi. Créer un parchemin virtuel aussi flexible, qui n'existe même pas dans le matériel, n'est pas une tâche facile. Cela m'a pris un mois, bien que j'aie un framework qui s'intègre fortement au backend. (je ne suis pas sûr, quand est-ce que c'est prêt, cela fait un an maintenant) donc le concept ionique est un peu fragile de nos jours, de toute façon vous pouvez utiliser ionic v4 avec react. Tout le framework JavaScript ne répond pas aux besoins, ce que vous voyez des applications natives. C'est bien s'il existe, mais s'il y a un bug, vous devez malheureusement comprendre aussi swift, android et d'autres choses. c++. J'ai pu faire du jus même si je n'utilise pas de composants Web pour le moment, donc la vitesse est bonne, et les applications hybrides seront la norme, sans aucun doute à cause de pwa, mais cela nécessite beaucoup plus de compétences que si vous allez juste en natif. (quelqu'un doit développer deux fois) aucun plugin open source n'était vraiment fiable.

Actuellement mon équipe ne travaille plus en ionique car ceux-ci. Incroyable !!!

Ce problème a été automatiquement identifié comme un problème Ionic 3. Nous avons récemment déplacé Ionic 3 vers son propre référentiel. Je déplace ce problème vers le référentiel pour Ionic 3. Veuillez suivre ce problème là-bas.

Si j'ai fait une erreur, et si ce problème est toujours d'actualité pour Ionic 4, veuillez en informer l'équipe Ionic Framework !

Merci d'avoir utilisé Ionic !

Problème déplacé vers : https://github.com/ionic-team/ionic-v3/issues/210