Ng-lazyload-image: Ionic 2 - funktioniert nicht innerhalb der "ion-card"-Direktive

Erstellt am 22. Aug. 2017  ·  11Kommentare  ·  Quelle: tjoskar/ng-lazyload-image

Hi,

Ich habe dieses Problem mit Ionic 2:

Grundsätzlich passiert, dass das Bild überhaupt nicht geladen wird, wenn sich das img-Tag in der ion-card-Direktive befindet, sondern nur das "defaultImage" anzeigt. Das Positionieren des Bildes außerhalb der Ionenkarte funktioniert OK.

Bitte lassen Sie es mich wissen, wenn Sie sich das anschauen können.

in place.ts
...
Exportklasse PlacePage {

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

Konstrukteur() {
}

...
}

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

Vielen Dank

Wait for feedback

Alle 11 Kommentare

Hi,

Befinden sich die ion-cord in einer Ansicht oder etwas mit einem eigenen Scroll-Container? Kannst du mir mehr von deiner Ansicht geben?

Danke für die schnelle Antwort.

Hier ist, was meine Ansicht im Wesentlichen hat:

** alles, was in einen "Ionen-Inhalt" verpackt ist, aber aus irgendeinem Grund hier nicht richtig formatiert ist.



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

Ich denke, ion-content kann das Problem sein. ng-lazyload-image verwenden standardmäßig window für Scroll-Ereignisse, aber ion-content verwendet ihren eigenen Scroll-Container, daher müssen wir auf das Scroll-Ereignis auf ion-content lauschen.

Können Sie versuchen, die folgende Vorlage zu verwenden:

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

Danke, dass Sie sich das angeschaut haben,

Ich habe es mit dem mitgelieferten Code versucht, aber keinen Unterschied gemacht, ich denke, der Ioneninhalt ist nicht das Problem und die Ionenkarte könnte es sein, denn wenn Sie das img-Tag außerhalb der Ionenkarte nehmen, funktioniert es einwandfrei.

Haben Sie versucht, es von Ihrer Seite zu reproduzieren? Ich könnte ein Projekt in Bitbucket freigeben, falls Sie es nicht tun.

Vielen Dank

Hm, okay. Ja, das wäre super nett, wenn ich Zugriff auf dein Projekt bekommen könnte :) Ich verwende tjoskar als Benutzername auf Bitbucket, wenn es sich um ein enges Projekt handelt.

Hast du das Problem gelöst? Ich schließe dieses Thema jetzt, aber öffne es gerne wieder.

Ich habe ein ähnliches Problem, das möglicherweise mit endlosem Scrollen zusammenhängt. Mein Projekt in der Entwicklung ist http://veterinary.communityone.com , Sie müssten ein Login erstellen, um den Inhalt zu sehen, und dann nach dem Anmelden auf den sozialen Feed in der Seitenleiste klicken. Die Startseite zeigt das Bild gut an, aber sobald das endlose Scrollen beginnt das erste Bild wird zu einem Spinner und erscheint nie wieder.

capture

@jcbowyer , ich habe gerade ein Konto erstellt, konnte das Problem jedoch nicht reproduzieren. Ich habe nur drei Posts und kein unendliches Scrollen bekommen.

Danke, ich habe schließlich etwas geändert und es hat angefangen zu funktionieren. Ich bin mir nicht sicher, was es behoben hat

@tjoskar Gleiches Problem hier. Irgendeine mögliche Lösung dafür?

@jeffreyramia , gleiches Problem? Benutzt du auch ionisch und ion-card ? Können Sie ein neues Problem eröffnen und das Problem beschreiben und vielleicht etwas Code teilen?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

MonchiLin picture MonchiLin  ·  3Kommentare

vincent-cm picture vincent-cm  ·  10Kommentare

sandeepdussa picture sandeepdussa  ·  9Kommentare

AzerHeshim picture AzerHeshim  ·  5Kommentare

kodeine picture kodeine  ·  7Kommentare