J'ai le même problème avec mon application depuis la mise à jour vers rc4.

Je suis confronté au même problème avec RC 4, dans RC 3, cela fonctionnait bien.

Même problème de mon côté

essayez d'utiliser simplement "img" au lieu de "ion-img". A travaillé pour moi.

"ion-img" a également cessé de fonctionner pour moi dans rc4 (même sans défilement virtuel). Le remplacement par "img" pourrait-il entraîner des problèmes de performances dans des listes plus longues ?

@sajTempler oui cela fonctionne mais nous perdons les avantages de performance tels que le chargement paresseux fourni avec ion-img

Vous pouvez toujours utiliser le chargeur paresseux ng2. Il y en a deux ou plus. J'utilise celui-ci https://github.com/tjoskar/ng2-lazyload-image

Ciao les gens,
ion-img fonctionne bien uniquement si la balise est dans le contenu visible., chaque liste, segment et ainsi de suite ... ne fonctionne pas.
Ma solution temporaire :

1. ouvrir node_modules/ionic-angular/component/img/img.js

2. changez la fonction ngAferContentInit avec :

   Img.prototype.ngAfterContentInit = fonction () {
   var _this = ceci ;
   this._img = this._elementRef.nativeElement.firstChild ;

   if(!this._img.hasAttribute("src")){
   
   
       this._img.src=this._elementRef.nativeElement.getAttribute("src");
   
   }
   
   this._unreg = this._platform.addEventListener(this._img, 'load', function () {
       _this._hasLoaded = true;
       _this.update();
   }, { passive: true });
   

   } ;

J'espère être réparé rapidement par l'équipe Ionic :)

Bonjour à tous! Merci d'avoir utilisé Ionic ! Quelqu'un pourrait-il poster un dépôt que je peux utiliser pour reproduire ce problème?

@ jgw96 Je vous ai envoyé un échantillon par e-mail

Avez-vous toujours le problème? Le "ion-img" ne fonctionne pas comme prévu sur mon appli, mais je ne trouve pas d'explication pour le moment

Pareil ici. Cela a-t-il été corrigé ?

@naveedahmed1 Pourriez-vous poster votre échantillon ici ? Je ne suis pas sûr qu'on parle du même problème

Nous avons également rencontré ce problème avec notre grille non-virtualScroll. Nous avons reproduit le problème dans un plunker . Semble fonctionner correctement dans une liste finie (non-virtualScroll). Chaque fois que nous ajoutons ion-infinite-scroll à la liste, les images ioniques montrent des problèmes de chargement et de déchargement.

Ainsi, les listes "normales" semblent fonctionner très bien. Les listes avec virtualScroll ou InfinityScroll semblent avoir des problèmes.

RC5 - même problème

Eh bien, apparemment, ion-img ne devrait être utilisé qu'en conjonction avec virtualScroll :
https://github.com/driftyco/ionic/commit/a5bbbd55cbd0e256614b6a1062aabbab4b1f21bd

J'ai exactement le même comportement que @pavimus

Après le tampon de défilement virtuel, l'image n'apparaît pas, la classe css est "img-unloaded" (voir capture d'écran ci-dessous)

avec ionique 2 finale. S'il vous plaît, pourriez-vous communiquer sur ce problème?

J'ai aussi ce bug dans le dernier ionic

Comme nous avions vraiment besoin que cela fonctionne dans notre grille d'images déroulante (grille d'ions, sans défilement virtuel), nous avons temporairement remplacé le fichier <project_root>/node_modules/ionic-angular/components/img/img.js dans notre projet par this gist .

Après quelques recherches, il apparaît que le _top_ et le _bottom_ d'un ion-img ne sont pas relatifs au sommet absolu du conteneur dans lequel il se trouve, ce qui entraîne le chargement/déchargement des mauvaises images. Voir les lignes 231 et 242 de l'essentiel pour la solution de contournement.

Nous avons également essayé d'étendre ion-img, mais sans grand succès. Et construire une version personnalisée (temporaire) des fichiers Ionic dist et l'utiliser comme dépendance locale semble également être plus compliqué que nous ne le pensions. Ainsi, pendant que l'équipe Ionic travaille là-dessus, nous utiliserons cette solution de contournement.

@sajTempler Est-il possible de charger des images uniquement lorsque le défilement est arrêté avec ce plugin ?

Ce bogue et quelques autres (images non réactives et uniquement 5x5 sur chrome/android, images ne se chargeant pas au premier démarrage avant tout défilement...) ont cassé une application de production qui s'appuie fortement sur l'affichage d'articles avec des images chargées paresseusement.
Bien que nous ne recevions aucune documentation sur de tels changements. Non pas que ce soit quelque chose de nouveau.

@ventr1x Je me demande aussi ce que font les développeurs car ce bug critique est toujours ouvert depuis le 16 décembre

C'est tout simplement cassé (cela n'a jamais vraiment fonctionné, en version bêta, ce n'était même pas mentionné dans la documentation).

Je suis passé à ng2-lazyload-image et je l'ai fait fonctionner avec rc6 comme ça (donc certains pourraient ne pas passer par les mêmes choses non documentées ..):

Composant

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
  templateUrl: 'image-modal.html'
})
export class ImageModal {
  @ViewChild(Content) content: Content;

  constructor() {
  }

}

Voir
<img [src]="img" [lazyLoad]="img" [scrollObservable]="content.ionScroll" />

@ventr1x Est-il possible de charger des images uniquement lorsque l'utilisateur a arrêté de faire défiler avec ce plugin ?

@ jgw96 une mise à jour de statut ?

Même problème ici..
Si je mets le ion-img dans un segment , il ne se chargera pas.
http://plnkr.co/edit/Zb2EQQVCFgdyZ1CRfPsW?p=preview

peut facilement se reproduire avec Ionic 3.1.1 ici https://github.com/shprink/ionic-withwebworker-vs-withoutwebworker

Bien que cela ne soit pas lié au problème, @shprink avez-vous trouvé un moyen d'exécuter une application ionique complète à partir de webworker ?

Je n'ai pas encore essayé quelque chose comme ça @naveedahmed1

Ok, le lien que vous avez partagé avait webworker dans l'url, donc j'ai pensé que vous l'auriez peut-être essayé. Je viens de vérifier que vous utilisez des service workers. Mais malheureusement, les travailleurs de service ne sont pas pris en charge sur l'appareil, tandis que les travailleurs Web travaillent également sur l'appareil.

ion-img dans un défilement virtuel est censé charger le img dans un web worker, c'est pourquoi il est dans le titre.

J'ai remplacé ion-img par img et cela fonctionne bien dans le défilement virtuel, utilisez img au lieu de ion-img

La doc indique qu'il faut utiliser ion-img pour des raisons de performances, voir : https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/

Par conséquent, opter pour img au lieu de ion-img ne peut pas être une solution permanente et j'espère que ce bogue de longue date sera bientôt corrigé.

@manucorporat Des progrès sur cette question, encore ?

+1

J'ai aussi eu ce problème. Le bogue est le calcul des img::top et img::bottom dans ion-img. Cela sera utilisé pour définir le drapeau canRequest et canRender dans Content::updateImgs pour ion-img pendant le défilement.
Ma première solution a été d'étendre ion-img pour les listes virtuelles.

import {Component, ElementRef, Renderer, Optional} from "@angular/core";
import {Img, Platform, DomController, Content} from "ionic-angular";

@Component({
  selector: 'virtual-ion-img',
  template: '<img>'
})
export class VirtualIonImg extends Img {
  constructor(private __elementRef: ElementRef,
              __renderer: Renderer,
              __plt: Platform,
              @Optional() private __content: Content,
              __dom: DomController) {
    super(__elementRef, __renderer, __plt, __content, __dom);
  }

  get top(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.top + this.__content.scrollTop - this.__content._cTop;
  }
  get bottom(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.bottom + this.__content.scrollTop - this.__content._cTop;
  }
}

Une autre option consiste à fixer le calcul dans Content::imgsUpdate en remplaçant cette fonction dans votre page.

import {updateImgs} from "ionic-angular/components/content/content";
import {Component, ViewChild} from "@angular/core";
import {Content} from "ionic-angular";

@Component({
  templateUrl: 'virtual-list.html',
})
export class VirtualListPage {
  @ViewChild(Content) _content: Content;
  ngAfterViewInit(){
    if(this._content) {
      this._content.imgsUpdate = () => {
        if (this._content._scroll.initialized && this._content._imgs.length && this._content.isImgsUpdatable()) {
          // reset cached bounds
          this._content._imgs.forEach((img:Img)=>img._rect = null);
          // use global position to calculate if an img is in the viewable area
          updateImgs(this._content._imgs, this._content._cTop * -1, this._content.contentHeight, this._content.directionY, 1400, 400);
        }
      };
    }
  }
}

DavidWiesner merci pour la réponse
je suis nouveau en ionique et angulaire (test ionique vs réactif natif en fait)

dans quel fichier je dois coller ça s'il vous plait ? dans app.components.ts ?

@DavidWiesner , Merci pour la solution. Pouvez-vous nous donner un exemple ? Je suis bloqué avec la fonction updateImgs()

@alainib

pour la première solution de contournement

vous devez créer un nouveau fichier, par exemple src/components/virtual-ion-img.ts ce nouveau composant doit être enregistré dans src/app/app.module.ts

import {VirtualIonImg} from "../components/virtual-ion-img";
...
@NgModule({
    declarations: [
        //... all other pages and components,
        VirtualIonImg
    ],
//... all other stuff e.g.: imports, providers
    entryComponents: [
        //... other pages and components,
        VirtualIonImg
    ]
})

Ensuite, vous pouvez utiliser la balise <virtual-ion-img [src]="url"></virtual-ion-img> à la place de <ion-img> comme décrit dans http://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/#images -within-virtual -faire défiler

pour la deuxième solution de contournement

Modifiez simplement le fichier de page dactylographié qui contient un défilement virtuel et ajoutez les importations, les éléments ViewChild et la méthode ngAfterViewInit .

@ kabus202 J'ai modifié mon commentaire et ajouté la déclaration d'importation manquante. La fonction updateImgs est définie dans le package de contenu angulaire ionique et doit être importée.

@DavidWiesner La première solution de contournement fonctionne mieux, mais je vois toujours des images obsolètes à la place des images qui ne se chargent pas.

@DavidWiesner : Merci beaucoup ! Votre première solution de contournement semble fonctionner parfaitement pour moi (dans un exemple très simple que j'ai construit pour me convaincre que je n'étais pas fou et que VirtualScroll était effectivement cassé), je vais l'essayer dans une application réelle maintenant.

Pourriez-vous peut-être faire une demande d'extraction pour réparer le composant Ionic _Img_ réel ?

@DavidWiesner merci pour l'explication.
J'ai toujours du mal désolé (je suis nouveau et j'essaie de réagir/ionique/nativscript en même temps)

c'est ce que je fais :

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import {VirtualIonImg} from "../components/virtual-ion-img";


@NgModule({
  declarations: [
    MyApp,      AboutPage,      ContactPage,        HomePage,       TabsPage
    VirtualIonImg
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,  AboutPage,      ContactPage,    HomePage,TabsPage
    VirtualIonImg
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

virtual-ion-img.ts

import {Component, ElementRef, Renderer, Optional} from "@angular/core";
import {Img, Platform, DomController, Content} from "ionic-angular";

@Component({
  selector: 'virtual-ion-img',
  template: '<img>'
})
export class VirtualIonImg extends Img {
  constructor(private __elementRef: ElementRef,
              __renderer: Renderer,
              __plt: Platform,
              @Optional() private __content: Content,
              __dom: DomController) {
    super(__elementRef, __renderer, __plt, __content, __dom);
  }

  get top(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.top + this.__content.scrollTop - this.__content._cTop;
  }
  get bottom(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.bottom + this.__content.scrollTop - this.__content._cTop;
  }
}

mon avis

<ion-content padding>
  <h2>Ionic List items</h2>
    <ion-list [virtualScroll]="items">
        <ion-item *virtualItem="let item">
            {{ item.i }}
            <virtual-ion-img [src]="item.src"
                 alt="item.image"  height="200" width="300" >
            </virtual-ion-img>
        </ion-item>
    </ion-list>

  FIN
</ion-content>

j'ai cette erreur :

[WARN] Error occurred during command execution from a CLI plugin (@ionic/cli-plugin-cordova). Your plugins may be out of
       date.
Error: Template parse errors:
Can't bind to 'src' since it isn't a known property of 'virtual-ion-img'.
1. If 'virtual-ion-img' is an Angular component and it has 'src' input, then verify that it is part of this module.
2. If 'virtual-ion-img' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this componen
t to suppress this message.
 ("
        {{ item.i }}

        <virtual-ion-img [ERROR ->][src]="item.src"
             alt="item.image"  height="200" width="300" >
                </virtual-ion-img>
"): HomePage<strong i="19">@16</strong>:25

qu'est-ce qui me manque s'il vous plait?

@alainib Peut-être que vous devez utiliser [src]="item.src" au lieu de src="item.src

kabus202 . Merci pour l'aide. l'erreur que j'obtiens est avec [src] , j'ai essayé les deux mais je lui colle le mauvais code html ;)

avec 'src' j'obtiens cette erreur

typescript: ..._amap/react-native-compare-ionic2-master/ionic/src/components/virtual-ion-img.ts, line: 14
Supplied parameters do not match any signature of call target.

            __dom: DomController) {
  super(__elementRef, __renderer, __plt, __content, __dom);

ngc failed: Failed to transpile TypeScript

@alainib quelle version d'ionique utilisez-vous ? Dans 3.2, le constructeur de Img a été modifié. Avant Ionic 3.2, vous devez ajouter NgZone comme autre paramètre au constructeur.

VirtualIonImg avant Ionic 3.2

import {Component, ElementRef, Renderer, Optional, NgZone} from "@angular/core";
import {Img, Platform, DomController, Content} from "ionic-angular";

@Component({
  selector: 'virtual-ion-img',
  template: '<img>'
})
export class VirtualIonImg extends Img {
  constructor(private __elementRef: ElementRef,
              __renderer: Renderer,
              __plt: Platform, 
              __zone: NgZone,
              @Optional() private __content: Content,
              __dom: DomController) {
    super(__elementRef, __renderer, __plt, __zone, __content, __dom);
  }

  get top(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.top + this.__content.scrollTop - this.__content._cTop;
  }
  get bottom(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.bottom + this.__content.scrollTop - this.__content._cTop;
  }
}

Cela fait six mois, pourquoi n'a-t-il pas été réparé ?

@WangRongda Avez-vous soumis un PR qui aurait dû être accepté et qui résout ce problème ?

@janpio Comme par magie, il s'affiche normalement en ce moment. J'ai eu des problèmes plusieurs jours parce que l'ion-img ne peut pas s'afficher normalement. Désolé.

Vous avez toujours le problème, dans une liste avec ~ 200 éléments avec des images distantes, les images ne se chargent pas ou sont brouillées (les images des éléments précédents sont sur un élément actuel). Une idée de comment résoudre ce problème ? J'ai essayé la solution avec virtual-ion-img et n'a pas fonctionné

@dspachos , si je comprends bien, l'équipe ionique a mentionné que la correction des bogues de défilement virtuel n'est pas une priorité pour eux pour le moment, essayez d'utiliser le défilement infini à la place.

@JustasKuizinas Mais infinite-scroll n'est pas la solution. À la fin, tous les éléments sont dans le DOM. Il y a donc beaucoup de problèmes de mémoire, en particulier dans iOS.

Il y avait des problèmes similaires dans ionic1.x. Je pensais qu'ils étaient tous fixés dans ionic2 ou 3. Malheureusement, il n'y a pas de solution.

@vahidvdn ce n'est pas la solution mais l'équipe ionique elle-même a dit que c'était la meilleure option en ce moment jusqu'à ce que le défilement virtuel soit corrigé :)

@JustasKuizinas J'espère qu'ils résoudront ce problème.

Mais il existe une bonne bibliothèque appelée vs-repeat (pour angularjs et angular). J'ai testé pour angularjs. C'est vraiment génial, mais il y a beaucoup de décalages lors du défilement dans iOS.

Je ne sais pas quelle est la priorité de l'équipe ionique, mais virtualScroll est l'un des composants les plus importants utilisés par les applications du monde réel.

@vahidvdn Totalement d'accord avec vous, je vais terminer mon application actuelle en utilisant Ionic, mais j'ai décidé que pour ma prochaine application, j'utiliserai un autre framework (React Native probablement ou script Native). L'équipe Ionic fait un excellent travail, mais le framework rencontre des problèmes de performances. Dans mon application actuelle, je me suis retrouvé avec une liste statique de 50 éléments maximum avec des images (en raison du bug de défilement virtuel) et lorsque j'appuie sur le bouton Précédent, il y a un décalage (j'utilise simplement popView, le comportement par défaut). Ce décalage n'est pas présent par exemple lorsque mes listes ont 15-20 éléments.
De plus, sous iOS, lorsque l'appareil est en mode d'économie de batterie (et que le processeur ralentit probablement les choses), les performances sont encore pires, presque inutilisables.

@dspachos il y a quelques mois, j'ai aussi pensé oh c'est un défilement virtuel, cela doit être la priorité absolue pour le faire fonctionner comme un charme, alors j'ai choisi ionique au lieu de nativescript, mais maintenant c'est triste d'entendre qu'il est toujours cassé et que nous ne pouvons pas obtenir de performances sans décalage avec énormes listes de données.

J'ai eu le même problème, mais je sais que mes listes auront moins de 150 éléments. J'ai essayé d'utiliser img au lieu de ion-img et cela fonctionne bien sans perte de performances. J'ai perdu du temps à essayer de résoudre avec ion-img mais en fait toutes les listes n'ont pas besoin de cette ressource.

@diegomachado1 Êtes-vous sûr que vos images sont dans la bonne position ? Veuillez ralentir votre connexion réseau, puis testez à nouveau. Lorsque certaines images ne sont pas chargées, les images précédentes reviennent à leur place et entrent en conflit les unes avec les autres.

2017-08-16 et ionic 3.6 et le problème existe toujours.
Dans mon cas, j'applique le deuxième correctif (publié en haut) et cela fonctionne.

@decpio Pourriez-vous nous dire exactement ce que vous avez fait ?

d'accord,

J'ai ajouté à ma page cassée:
import { Component, ViewChild } from '@angular/core' ;
import { updateImgs } de 'ionic-angular/components/content/content' ;
import { Img } de 'ionic-angular/components/img/img-interface' ;
import { Content } from 'ionic-angular' ;

/* 2017-08-16 - add this to class body
    start FIX#9660 ion-img doesn't correctly work with virtualScroll
    https://github.com/ionic-team/ionic/issues/9660#issuecomment-304840427
*/
@ViewChild(Content) _content: Content;
ngAfterViewInit() {
    if (this._content) {
        this._content.imgsUpdate = () => {
            if (this._content._scroll.initialized && this._content._imgs.length && this._content.isImgsUpdatable()) {
                // reset cached bounds
                this._content._imgs.forEach((img: Img) => (<any>img)._rect = null);
                // use global position to calculate if an img is in the viewable area
                updateImgs(this._content._imgs, this._content._cTop * -1, this._content.contentHeight, this._content.directionY, 1400, 400);
            }
        };
    }
}
/*
end FIX#9660
*/

et c'est tout - le problème disparaît.
Ma page cassée :

<ion-content padding> <ion-grid [virtualScroll]="__items" [bufferRatio]="2" approxItemHeight="80px" approxItemWidth="100%" [virtualTrackBy]="ItemComparer"> <div *virtualItem="let item"> <ion-row align-items-center justify-content-center> <ion-col col-auto> <ion-item> <ion-thumbnail item-start> <ion-img [src]="'my-personalized-url?item='+item?.item"></ion-img> </ion-thumbnail> </ion-item> </ion-col> </ion-row> </ion-grid>

@DavidWiesner Merci ! J'utilise Ionic-Angular 3.6.0 (le dernier au moment d'écrire ces lignes) et cela fonctionne comme prévu.

Le 2ème fonctionne très bien aussi. Mais je ne voulais pas l'utiliser à cause de problèmes de largeur et de hauteur. J'ai également rencontré des problèmes où les éléments du bas sont recouverts par les éléments du dessus s'ils n'ont pas eu leur image chargée. Mais lorsque je fais défiler vers le bas, les problèmes de chevauchement ont disparu. Les éléments précédents qui avaient disparu de la fenêtre ont commencé à se chevaucher. Et une fois que ces éléments sont dans la fenêtre d'affichage et que les images sont à nouveau chargées, le problème de chevauchement a disparu pour ces lots. Juste FYI.

@decpio votre solution fonctionne parfaitement pour moi. Les images restent "déchargées" tant que le défilement ne les atteint pas mais sont chargées et apparaissent quand elles devraient l'être. Merci beaucoup!!!

Juste une chose remarquée, si la taille de l'écran/de la fenêtre/du cadre change après le chargement de la page, le chargement en dentelle ne fonctionne toujours que pour le nombre d'éléments situés dans la plage d'initialisation. Mais cela pourrait déjà être causé par le comportement d'origine.

merci @DavidWiesner & @decpio la deuxième solution de contournement résout le problème sur Ionic 3.7.1

Ainsi, la solution de contournement résout également le problème pour Ionic 3.8. Pourquoi ne pas l'utiliser @manucorporat @adamdbradley
C'est quand même quelque chose de vraiment mauvais pour toute utilisation de VS...
@masimplo Voulez-vous vérifier ? Après ton super boulot pour https://github.com/ionic-team/ionic/pull/12917 tu as définitivement les compétences pour plonger en VS... 🙉

cette solution de contournement ne fonctionne pas sur iOS9. Sur iOS10 et iOS11, c'est ok.

@HugoHeneault , @manucorporat , @adamdbradley : Je suis tout à fait d'accord que cette solution de contournement devrait être fusionnée dans Ionic (je ferais une pull request mais comme je ne suis pas l'auteur de la solution de contournement, je ne me sens pas à l'aise de le faire moi-même), ce n'est peut-être pas parfait, mais c'est quand même infiniment mieux que sans le patch.

Je pense que le problème est que l'équipe Ionic ne se rend pas compte que virtualscroll ne fonctionne pas. Il y a une entrée qui dit "défilement virtuel : corrections des problèmes de scintillement" dans le journal des modifications 3.8, pourquoi voudriez-vous résoudre certains problèmes de scintillement pour une fonctionnalité dont vous savez qu'elle ne fonctionne pas du tout ?

Je suis d'accord @nicolus l'équipe Ionic ne réalise pas que virtualscroll/ion-img ne fonctionne pas et que virtualscroll ne fonctionne pas avec ion-refresh. @HugoHeneault @manucorporat @adamdbradley

@HugoHeneault Je n'ai pas du tout travaillé avec ion-img. J'aurais probablement dû, mais je ne l'ai pas fait. Je peux jeter un oeil mais je n'ai pas de référence sur ce qui est cassé.

@nicolus l'entrée dans le journal des modifications provient d'un PR que j'ai moi-même soumis et qui corrige un problème de régression dans le défilement virtuel. Je comprends votre frustration, mais que PR a résolu un problème particulier avec VS qui le rendait inutilisable lorsque l'ensemble de données sous-jacent était souvent mis à jour, ce n'était pas une réécriture complète du composant qui résolvait tous les problèmes.

Je suis également d'accord que VS a besoin de beaucoup plus d'attention, mais il a deux problèmes principaux qui rendent probablement sa maintenance non viable :

1. Le défilement virtuel est un problème difficile à résoudre en premier lieu. Très peu de frameworks/bibliothèques l'ont résolu avec succès et avec certaines restrictions. Ionic VS essaie de tout résoudre, taille d'élément variable, multi-colonnes, en-têtes/pieds de page par élément, images, redimensionnement, etc. au point 2 pour plus d'informations)
2. Le défilement virtuel ionique interagit avec de nombreux composants ioniques. Ion-img pour les images, défilement infini pour charger plus de données, contenu pour le défilement, etc. Il est également censé rendre à la fois les éléments ioniques ion-item, ion-card, etc. ainsi que les éléments angulaires personnalisés.

Cette complexité est trop lourde à gérer pour un PR et nécessite une refonte complète de ce que fait le défilement virtuel (ce qui signifie qu'il doit s'aligner sur les objectifs de l'équipe ionique), comment il le fait et quelles interactions avec les autres composants il devrait avoir.

En passant à ionic v4, je pense que beaucoup d'entre eux vont changer (d'une part, il ne pourra probablement rendre que d'autres composants Web et non des composants angulaires à l'intérieur) comme le fait la liste de fer de polymère aujourd'hui , donc je ne sais pas s'il faut faire l'effort de réparer l'implémentation actuelle a une valeur réelle pour les personnes qui continueront à utiliser le framework ionique après sa sortie v4 dans leurs projets. Je cherche moi aussi des options hors de ce trou de lapin car sans défilement virtuel, nous ne pouvons pas rivaliser avec les applications natives pour rendre une quantité réaliste de données.

@masimplo : tu as raison, j'avais oublié que le défilement virtuel est utilisé pour bien plus que juste ion-img (parce que c'est pour ça que je l'utilise personnellement).
Je ne voulais pas critiquer cette correction de bug en particulier, j'aimerais juste que nous ayons plus de commentaires de l'équipe concernant ce problème.

J'espère une solution rapide sur celui-ci. Y a-t-il des nouvelles? Est-ce que cela fait l'objet d'une enquête par l'équipe ?

J'espère aussi un correctif

@RafaelKr @fdambrosio Je pense qu'il vaut mieux ne pas espérer de correctifs sur les composants avant la sortie de la v4. Malheureusement pour nous qui travaillons avec ionic3, nous devons gérer des composants bogués ou les réparer nous-mêmes. N'hésitez pas à corriger et à créer des relations publiques ;)

+1

essayez d'utiliser cette façon
html <ion-img [src]="image.url" [alt]="image.alt">

toujours en attente d'un correctif...

Il faut attendre la v4 ionique.

@miqmago : Veuillez lire ici pour plus d'informations :
https://blog.ionicframework.com/whats-the-issue-with-issues/

https://github.com/ionic-team/ionic/issues/9660#issuecomment -307314053 travaillé

J'ai eu le même problème d'affichage de l'image dansà l'intérieur de [virtualScroll] comment puis-je les réparer.

Il faut attendre la v4 ionique.

Il serait stupide de croire que ce sera corrigé dans Ionic 4.
Nous aurons de nouveaux bugs, mais l'équipe se concentrera sur Ionic 5, puis 6, en laissant beaucoup de bugs à chaque nouvelle version.
Du côté de React, il y a un risque de breaking changes à chaque version, mais au moins on sait à quoi s'attendre.
Très déçu par Ionic... C'est indigne de laisser traîner des bugs aussi longtemps et de laisser les utilisateurs les corriger.

@ mopi1402 Je sais que la façon dont les problèmes ont été traités par l'équipe ionique dans le passé n'est pas vraiment bonne. Mais si vous voulez savoir comment ils géreront la gestion des versions et les problèmes à venir, vous devriez lire
https://blog.ionicframework.com/whats-the-issue-with-issues/
https://blog.ionicframework.com/ionic-semantic-versioning-release-schedule-and-lts/

N'oubliez pas que le cadre ionique est open source et que n'importe qui peut aider à résoudre les problèmes. :)

@ mopi1402 Si vous êtes un développeur Angular, je suggère Nativescript au lieu de react-native.
Ici vous pouvez trouver pourquoi Nativescript est meilleur que réagir.

Je suis d'accord @ mopi1402 c'est l'une des fonctionnalités les plus utilisées

Ne fonctionne toujours pas dans la version bêta v4.

ce n'est pas bon que ça ne marche pas avec Ionic 4

Ionic est un logiciel open source, si vous voulez que les choses soient réparées rapidement, vous pouvez créer un correctif et soumettre un PR 👍

@HugoHeneault : C'est un logiciel open source que je paie 29$ par mois via mon abonnement pro (je veux dire bien sûr que le framework lui-même est gratuit, mais ce n'est pas comme s'il s'agissait d'une organisation à but non lucratif, ils donnent le framework gratuitement sur commande pour faire de l'argent sur les abonnements), donc je ne m'attends pas à devoir le réparer moi-même gratuitement.

Je peux comprendre que c'est un problème difficile à résoudre, que ionic 4 est toujours en version bêta, que c'est un problème de faible priorité... Toutes ces raisons sont parfaitement valables, mais "c'est OSS qui le répare vous-même lol" ne l'est pas.

@nicolus Vous avez tout à fait raison, et je me suis également plaint lorsque les services que je paye ne fonctionnaient pas. Mais nous devons garder à l'esprit que même si la société Ionic peut gagner de l'argent grâce à des services premium, de nombreux développeurs de leurs équipes travaillent beaucoup et doivent gagner leur vie... pour un outil gratuit que tout le monde peut utiliser sans payer.

Pour moi, c'est ainsi que fonctionnent les OSS : vous n'avez aucune obligation de payer leurs services et vous pouvez créer des applications géniales sans donner un centime, mais ils fournissent des services pour vous faciliter la vie. Je paie également de nombreux abonnements pro, ce qui ne veut pas dire que je ne peux pas aider lorsqu'un correctif est possible sans passer des jours dessus.

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 concerne toujours Ionic 4, veuillez en informer l'équipe Ionic Framework !

Merci d'utiliser Ionic !

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