Ionic-framework: ion-img in virtualScroll zeigt Bilder nicht wie erwartet an

Dieses Problem kann ich bestätigen. Ich sehe ein ähnliches Verhalten in meiner App und verwende auch Ionic Framework 3.0.1.

Die Untersuchung des DOM während des Scrollens zeigt, dass sich das class Attribut einiger ion-image Komponenten von "img-loaded" zu "img-unloaded" ändert, obwohl sich die Komponenten noch im sichtbaren Ansichtsfenster befinden.

Hallo alle zusammen! Würde es euch etwas ausmachen, das neueste nächtliche auszuprobieren und zu sehen, ob dies dort immer noch ein Problem ist? Um die Nacht von ionic-angular zu installieren, können Sie npm install ionic-angular<strong i="6">@nightly</strong> --save in Ihrem Projekt ausführen. Vielen Dank!

Ja, passiert immer noch :(

Für mich auch. Das Problem besteht weiterhin bei der aktuellen Nightly.

es ist auch mit *ngFor passiert

Ich habe, was ich vermute, ein verwandtes Problem. Meine Bilder für die Thumbnails sind alle unterschiedlich hoch und 300px breit. Diese wurden in v2 wie erwartet beschnitten, jetzt erscheinen überhaupt keine Bilder mehr.

Das gleiche hier.. wurde leer mit einer 80x80px Miniaturansichtsliste

    <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>

umgebung.txt
Scheint mit 3.1.0 nicht geheilt zu werden?
Verwendet "ionic Serve" auf Desktop-Chrome (Win 10) zum Testen.
Viele graue Kreise anstelle von Bildern, bis einige Bilder ein Stück weit nach unten scrollen, dann wieder zu grauen Kreisen ...

Cordova CLI: 6.5.0
Ionen-Framework-Version: 3.1.0
Ionische CLI-Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionische App-Skripte Version: 1.3.4
ios-deploy-Version: Nicht installiert
ios-sim-Version: Nicht installiert
Betriebssystem: Windows 10
Knotenversion: v6.10.0
Xcode-Version: Nicht installiert

Habe auch versucht auf 3.1.0 zu aktualisieren -> Problem ist immer noch vorhanden

Für die Aufzeichnung - versucht 3.1.1 - immer noch ein Problem.

Ich habe auch 3.1.1 versucht - immer noch ein Problem.

Dies ist ein altes Problem - seit RC4 vorhanden - alle Infos finden Sie in #9660

@jgw96 kannst du hier ganz einfach mit Ionic 3.1.1 reproduzieren https://github.com/shprink/ionic-withwebworker-vs-withoutwebworker

Für die Aufzeichnung habe ich eine Komponente, die ich mit einer ähnlichen Funktionalität wie mit Canvas versehen möchte. :)
Kann jemand eine gemeinsame "Ion-Canvas" -Komponente für Lazy Loading erstellen? :)

habe das gleiche problem :/

habe das gleiche problem :)

Hallo, ich habe das gleiche Problem, in meinem Fall ... die ersten Bilder werden nicht angezeigt ... wenn ich dann nach unten scrolle, werden die Bilder angezeigt, aber nur die, die sich unten befinden ... nach oben scrollen lässt nicht die ersten Bilder erscheinen...

  <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>

Dies ist der HTML-Code, wenn sie nicht angezeigt werden:
<ion-img class="img-unloaded" ng-reflect-src="assets/img/1.jpg" ng-reflect-width="705px" ng-reflect-height="705px"> <img> </ion-img>
beim zeigen:
<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>

Ich habe den Fehler gefunden. In diesem Kommentar https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 sind zwei mögliche Problemumgehungen dafür.

Ich bekomme das auch, wie hier erklärt Plunk demonstriert auch das Problem.

Hier gilt das gleiche. Habe immer noch das Problem

$ 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

Ich habe dieses Problem gesehen, es aber mit diesem temporären Stil-Hack behoben:

   <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>

und diese CSS-Regel:

    ion-label {
        height: 100%;
    }

Ich sage nicht, dass es DIE Lösung ist, aber das Problem verschwindet.

Immer noch unfixiert. Keine der vorgeschlagenen Problemumgehungen hier und in einem anderen Problem funktioniert ordnungsgemäß. Wie sollen wir eine Liste mit Hunderten kleiner Miniaturansichten reibungslos scrollen, wenn unendliches Scrollen als Ersatz keine Option ist? Dies ist ein sehr einfacher Anwendungsfall auf Mobilgeräten...

Sie können das unabhängige ng-lazyload-image verwenden. Es scheint mir zu funktionieren, ich muss nur die Ladezeit überprüfen, da es für mich etwas schwer war. (vielleicht aus einem anderen Grund, was ich bereits gelöst habe - Canvas sollte nicht zum ionischen Scrollen gehen, da es sehr wackelig war)

Da ich einen strengen Projektzeitplan habe, kann ich mir diesen nervigen Fehler später vielleicht ansehen.
Ich habe gemerkt, dass es keine große Sache ist. Ich habe gerade eine ionische Lösung vorgenommen.

Sie (bubbleguuum) können es auch debuggen, wenn Sie etwas lernen möchten. Es war vielleicht keine so große Sache, aber niemand hatte es sich angesehen. (Ich denke, einige Redesigns finden statt, aber der temporäre Bugfix hätte gepostet werden sollen) Ich bin ein unabhängiger Entwickler, also wenn Sie es beheben, bin ich froh, dass ich es nicht muss. :)

Wie auch immer, Angular braucht aussagekräftige Fehlermeldungen, die meisten Schmerzen kommen von dort.
Der Track-Trace zeigt nicht den Aufrufer Ihrer App, sondern nur eine Art Webpack-/Promise-Fehler immer von einer tieferen Ebene.

Unglaublich, dass das nicht funktioniert. @bubbleguuum hat es auf den Kopf getroffen.

Dies ist absolut inakzeptabel. Im Grunde erfordert jede App die fragliche Funktionalität, die nicht funktioniert. Auch dass es ein Problem #9660 vom Dez 2016 gibt und es noch nicht behoben ist, ist beunruhigend... :(

Ich habe auch das gleiche Problem. Ich habe json verwendet, um die Daten abzurufen, und * ngFor, um die Daten im Frontend anzuzeigen. Es scheint jedoch, dass das img-Tag in ion-img aus bestimmten Gründen leer bleibt.

        <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>

aber das ergebnis sieht so aus

Ich habe auch das gleiche Problem wie der Typ über mir.
Das ist der Code

Das ist die Ausgabe

Ich hatte vor einiger Zeit ein ähnliches Problem. Ich habe mein Problem behoben, indem ich die Map-Array-Funktion verwendet habe, um die Bild-URL zu ändern. Sie brauchen also etwas wie:-

und in der .ts-Datei

this.pizzaList = this.pizzaList.map((pizzas)=>{
pizzas.imgUrl = "./assets/" + pizzas.imgUrl + ".jpg";
Pizza zurückgeben
});

Ich verwende die Kartenfunktion beim Aufrufen des Dienstes:
Der Service

Die .ts-Datei

Ich habe auch das gleiche Problem in einem * ngfor. Ich wechsle zu beim Warten auf eine Lösung !!

es funktioniert nicht, was ist die Problemumgehung?!?

@karimessouabni Ich habe eine Lösung für dieses Problem. Wir können das img-Tag direkt verwenden, um leere Bilder zu vermeiden.
<img src="{{product.img}}">

@shahid27125 Dies ist nicht die Lösung, da alle Bilder sofort geladen werden. Wenn Sie eine Liste mit mehr als 100 Elementen mit Bildern haben, wird die Leistung und die mobilen Daten dadurch beeinträchtigt.

@fdambrosio In diesem Kommentar https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 sind zwei mögliche Problemumgehungen dafür.

danke @DavidWiesner

Ein weiterer frustrierter Entwickler mischt sich ein... Im Ernst, Leute, repariert diesen Mist.

Ich stimme @tomcatmwi zu

Gibt es Pläne zur Behebung dieses Problems?

Wow, kann nicht glauben, wie lange die Leute darauf gewartet haben ... Warten jetzt auch auf eine Lösung.

Für alle, die sich nur mit dem Laden von Bildern beschäftigen, können Sie sich das ng2-lazyload-image-Modul ansehen. https://www.npmjs.com/package/ng2-lazyload-image

Ich verwende das mit Tausenden von Zeilen in der Produktion und es scheint gut zu funktionieren.

Nun, das ist nicht ganz richtig:

1. Zuerst müssen Sie Ihre Komponente aktualisieren (d. h., wenn Ihre Artikel tatsächlich benutzerdefinierte Komponenten sind).
2. jede Komponente benötigt dann eine eigene Referenz zum Ionengehalt
3. natürlich werden die ersten paar Bilder erst dann geladen, wenn du scrollst
4. In welchem ​​Zustand denken Sie darüber nach, die virtuelle Liste zu entfernen, die Sie auch verwenden?
6. git checkout .
7. beginnen zu hoffen, dass das ionic team @adamdbradley bemerkt, dass das Problem seit Anfang 2017 ungelöst ist.
8. warte auf fix.

Immer noch der gleiche Fehler..

Sameeeeeeee hier

Ja immer noch ein Bug.
Ich warte auf eine Lösung. In der Zwischenzeit werde ich dies verwenden: https://www.npmjs.com/package/ng-lazyload-image

Wenn es eine beste Lösung gibt, bitte zögern Sie nicht, mir zu sagen :)

Ändere <ion-img [src]="url"></ion-img> in <img [src]="url"> Funktioniert für mich

Habe dieses Problem auch. @dm-grinko mit img unterstützt kein Lazy-Loading, was wichtig ist, wenn Sie viele Bilder haben.

Ich hatte Bilder im Array, die ich vom Server heruntergeladen hatte, jetzt möchte ich es in zeigenund verwenden Sie virtuelles Scrollen, aber Bilder werden nicht gerendert, es werden nur 1-2 Bilder angezeigt.
hier ist mein 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 ändere ion-img in img
ion-img funktioniert nicht

<img> funktioniert auch nicht in virtualscroll, weil ich ein Array hatte, in dem der Bildwert in einem base64-String gespeichert ist.

Unglaublich ... Ich denke, ich werde schnell mein gesamtes Team und meine Projekte zu React Native bringen.
Es ist empörend zu sehen, dass dieser Fehler immer noch nicht behoben ist.
Anstatt an Ionic 4 zu arbeiten, wäre es schön, erstklassige Lieferungen sicherzustellen.

Arbeit um Jungs?

Irgendeine Lösung

Um ehrlich zu sein, hat das ionic-Team ein schönes unabhängiges Projekt, wie zum Beispiel Kondensator, was nützlich war, als ich beschloss, mein eigenes Framework zu erstellen. Die neue ionische virtuelle Scroll-Funktionalität hat sich nicht geändert, nur in Schablone umgewandelt (Webkomponente, Beschleunigung, kein Support von allen, Safari-HWS-Probleme damit), also warten Sie nicht zu lange auf v4. Diese virtuelle Scroll-Implementierung ist sehr einfach. (Fehler bei der Änderung der Bildschirmausrichtung, variable Elemente, träge Ladeprobleme, zu starr, versuchen, Probleme zu lösen, was der Browser tut) Im Jahr 2016, als ich nur wenig Wissen über Angular hatte, obwohl ich jahrzehntelang in der Branche tätig war, war es sehr schwierig, einen Rahmen zu erstellen. Mein Bauchgefühl ist, dass Open-Source-Projekte 3 Zyklen später veröffentlicht werden sollten, wenn die grundlegenden Konzepte vorhanden sind. Es stimmt auch über eckig. Ein so flexibles virtuelles Scrollen zu erstellen, das nicht einmal im Material existiert, ist keine leichte Aufgabe. Ich habe einen Monat gebraucht, obwohl ich ein Framework habe, das stark in das Backend integriert ist. (Ich bin mir nicht sicher, wann es fertig ist, es ist jetzt ein Jahr) daher ist das ionische Konzept heutzutage etwas wackelig, sowieso kann man ionic v4 mit React verwenden. Das gesamte JavaScript-Framework erfüllt nicht die Anforderungen, die Sie von nativen Apps sehen. Es ist gut, wenn es existiert, aber wenn es einen Fehler gibt, müssen Sie leider auch Swift, Android und andere Dinge verstehen. c++. Ich konnte etwas Saft machen, auch wenn ich derzeit keine Webkomponenten verwende, daher ist die Geschwindigkeit in Ordnung und Hybrid-Apps werden die Norm sein, keine Frage, zumindest wegen pwa, aber es erfordert viel mehr Fähigkeiten als wenn Sie nur zu native gehen. (jemand muss zweimal entwickeln) kein Open-Source-Plugin war wirklich zuverlässig.

Momentan arbeitet mein Team nicht mehr in ionischen weil diese. Unglaublich !!!

Dieses Problem wurde automatisch als Ionic 3-Problem erkannt. Wir haben Ionic 3 kürzlich in ein eigenes Repository verschoben. Ich verschiebe dieses Problem in das Repository für Ionic 3. Bitte verfolgen Sie dieses Problem dort.

Wenn ich einen Fehler gemacht habe und dieses Problem immer noch für Ionic 4 relevant ist, lassen Sie es bitte das Ionic Framework-Team wissen!

Vielen Dank, dass Sie Ionic verwenden!

Problem verschoben nach: https://github.com/ionic-team/ionic-v3/issues/210