Ionic-framework: ion-img di virtualScroll tidak menampilkan gambar seperti yang diharapkan

Saya dapat mengkonfirmasi masalah ini. Saya melihat perilaku serupa di aplikasi saya dan saya juga menggunakan Ionic Framework 3.0.1.

Menyelidiki DOM selama pengguliran menunjukkan bahwa atribut class dari beberapa komponen ion-image berubah dari "img-loaded" menjadi "img-unloaded" meskipun komponen masih dalam viewport yang terlihat.

Halo semuanya! Maukah kalian mencoba nightly terbaru dan melihat apakah ini masih menjadi masalah di sana? Untuk menginstal malam ionic-angular Anda dapat menjalankan npm install ionic-angular<strong i="6">@nightly</strong> --save di proyek Anda. Terima kasih!

Ya, masih terjadi :(

Untuk saya juga. Masalah berlanjut dengan malam saat ini.

itu terjadi dengan *ngFor juga

Saya memiliki apa yang saya anggap sebagai masalah terkait. Gambar saya untuk thumbnail semuanya berbeda tinggi dan lebarnya 300px. Ini dulu dipotong seperti yang diharapkan di v2 sekarang tidak ada gambar yang muncul sama sekali.

Sama di sini .. kosong dengan daftar thumbnail 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>

lingkungan.txt
Sepertinya tidak disembuhkan menggunakan 3.1.0?
Menggunakan 'layanan ionik' di Chrome desktop (Menang 10) untuk menguji.
Banyak lingkaran abu-abu alih-alih gambar sampai gulir ke bawah cukup jauh beberapa gambar lalu kembali ke lingkaran abu-abu ...

Cordova CLI: 6.5.0
Versi Kerangka Ionik: 3.1.0
Versi CLI ionik: 2.2.2
Versi Lib Aplikasi Ionic: 2.2.1
Versi Skrip Aplikasi Ionic: 1.3.4
versi ios-deploy: Tidak diinstal
versi ios-sim: Tidak diinstal
OS: Windows 10
Versi Node: v6.10.0
Versi Xcode: Tidak diinstal

Juga mencoba memperbarui ke 3.1.0 -> masalah masih ada

Sebagai catatan - mencoba 3.1.1 - masih menjadi masalah.

Saya juga mencoba 3.1.1 - masih menjadi masalah.

Ini adalah masalah lama - hadir sejak RC4 - semua info dapat ditemukan di #9660

@ jgw96 Anda dapat dengan mudah mereproduksi dengan Ionic 3.1.1 di sini https://github.com/shprink/ionic-withwebworker-vs-withoutwebworker

Sebagai catatan saya memiliki komponen yang ingin saya buat fungsionalitas serupa karena menggunakan kanvas. :)
Adakah yang bisa membuat komponen "ion-canvas" yang umum untuk pemuatan lambat? :)

mengalami masalah yang sama :/

memiliki masalah yang sama :)

Halo Saya mengalami masalah yang sama, dalam kasus saya ... gambar pertama tidak muncul ... kemudian jika saya menggulir ke bawah ke bawah gambar mulai muncul tetapi hanya yang ada di bawah ... menggulir ke atas tidak membuat gambar kepalan muncul ...

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

Ini adalah html ketika mereka tidak ditampilkan:
<ion-img class="img-unloaded" ng-reflect-src="assets/img/1.jpg" ng-reflect-width="705px" ng-reflect-height="705px"> <img> </ion-img>
saat menunjukkan:
<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>

Saya menemukan bugnya. Dalam komentar ini https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 adalah dua kemungkinan solusi untuk ini.

Saya juga mendapatkan ini, seperti yang dijelaskan di sini. Punk ini juga menunjukkan masalahnya.

Sama disini. Masih memiliki masalah

$ 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

Saya melihat masalah ini tetapi memperbaikinya dengan peretasan gaya sementara ini:

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

dan aturan css ini:

    ion-label {
        height: 100%;
    }

Tidak mengatakan itu adalah perbaikan tetapi membuat masalah hilang.

Masih belum diperbaiki. Tidak ada solusi yang disarankan di sini dan di masalah lain yang berfungsi dengan baik. Bagaimana kita bisa dengan lancar menggulir daftar ratusan thumbnail kecil ketika gulir tak terbatas sebagai pengganti bukanlah pilihan? Ini adalah kasus penggunaan yang sangat mendasar di ponsel...

Anda dapat menggunakan ng-lazyload-image independen. Sepertinya saya bekerja, hanya saya perlu memverifikasi beberapa waktu pemuatan, bagi saya itu agak berat. (mungkin karena beberapa alasan berbeda, apa yang telah saya selesaikan - kanvas tidak boleh masuk ke gulir ionik, karena sangat goyah)

Karena saya memiliki jadwal proyek yang ketat, saya mungkin akan melihat bug yang mengganggu ini nanti.
Saya telah menyadari itu bukan masalah besar. Saya telah membuat beberapa perbaikan ionik-asli, barusan.

Anda (bubbleguuum) mungkin juga men-debugnya, jika Anda ingin mempelajari banyak hal. Mungkin bukan masalah besar, hanya saja tidak ada yang melihatnya. (beberapa desain ulang sedang terjadi, saya pikir, tetapi perbaikan bug sementara seharusnya telah diposting) Saya seorang pengembang independen, jadi jika Anda memperbaikinya, saya akan senang, bahwa saya tidak perlu melakukannya. :)

Pokoknya Angular membutuhkan pesan kesalahan yang berarti, sebagian besar rasa sakit datang dari sana.
Jejak trek tidak menunjukkan pemanggil aplikasi Anda, hanya semacam kesalahan webpack/janji selalu dari tingkat yang lebih dalam.

Sulit dipercaya bahwa ini tidak berhasil. @bubbleguuum memukulnya di kepala.

Ini benar-benar tidak dapat diterima. Hampir setiap aplikasi membutuhkan fungsionalitas yang dimaksud yang tidak berfungsi. Juga ada masalah #9660 dari Des 2016 dan masih belum diperbaiki itu meresahkan... :(

Saya juga mengalami masalah yang sama. Saya menggunakan json untuk mendapatkan data dan *ngFor untuk menampilkan data di frontend. Tapi, sepertinya tag img di ion-img tetap kosong karena beberapa alasan.

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

tapi hasilnya seperti ini

Saya juga mengalami masalah yang sama dengan pria di atas saya.
Ini kodenya

Ini adalah outputnya

Saya memiliki masalah serupa beberapa waktu lalu. Saya memperbaiki masalah saya dengan menggunakan fungsi array peta untuk mengubah URL gambar. Jadi, Anda memerlukan sesuatu seperti: -

dan di file .ts

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

Saya menggunakan fungsi peta saat memanggil layanan:
Layanan

File .ts

Saya juga mengalami masalah yang sama di dalam file *ngfor. Saya beralih ke sambil menunggu solusi!!

itu tidak bekerja, apa solusinya?!?

@karimessouabni saya punya solusi mengenai masalah ini. Kita bisa langsung menggunakan tag img untuk menghindari gambar kosong.
<img src="{{product.img}}">

@shahid27125 ini bukan solusi karena, semua gambar akan dimuat secara instan. Memiliki daftar dengan 100+ item dengan gambar akan menguras kinerja dan data seluler jika melakukannya.

@fdambrosio Dalam komentar ini https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 adalah dua kemungkinan solusi untuk ini.

terima kasih @DavidWiesner

Satu lagi pengembang frustrasi menimpali... Serius guys, perbaiki omong kosong itu.

Saya setuju dengan @tomcatmwi

Adakah rencana untuk memperbaiki masalah ini?

Wow, tidak percaya berapa lama orang telah menunggu ini ... Menunggu perbaikan sekarang juga.

Untuk semua orang yang hanya peduli dengan pemuatan gambar, Anda dapat melihat modul ng2-lazyload-image. https://www.npmjs.com/package/ng2-lazyload-image

Saya menggunakannya dengan ribuan baris dalam produksi dan tampaknya berfungsi dengan baik.

Nah ini tidak sepenuhnya benar:

1. pertama, Anda harus memperbarui komponen Anda (yaitu, jika item Anda sebenarnya adalah komponen khusus)
2. setiap komponen kemudian membutuhkan referensi sendiri untuk kandungan ion
3. tentu saja beberapa gambar pertama tidak akan dimuat kemudian sampai Anda menggulir
4. di negara bagian mana, Anda mulai berpikir untuk menghapus daftar virtual yang juga Anda gunakan
6. git checkout .
7. mulai berharap tim ionik @adamdbradley memperhatikan masalah yang belum terselesaikan sejak awal 2017.
8. menunggu untuk memperbaiki.

Masih sama bugnya..

Samaeeee disini

Ya masih bug.
Saya menunggu perbaikan. Sementara itu saya akan menggunakan ini: https://www.npmjs.com/package/ng-lazyload-image

Jika ada solusi terbaik, jangan ragu untuk memberi tahu saya :)

Ubah <ion-img [src]="url"></ion-img> menjadi <img [src]="url"> Berfungsi untuk saya

Memiliki masalah ini juga. @dm-grinko menggunakan img tidak mendukung pemuatan lambat, yang penting jika Anda memiliki banyak gambar.

Saya memiliki Gambar dalam array yang telah saya unduh dari server sekarang saya ingin menunjukkannyadan gunakan gulir virtual tetapi gambar tidak ditampilkan hanya 1-2 gambar yang ditampilkan.
inilah kode saya.

<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 ubah ion-img menjadi img
ion-img tidak berfungsi

<img> juga tidak berfungsi di virtualscroll karena saya memiliki array di mana nilai gambar disimpan dalam string base64.

Luar biasa ... Saya pikir saya akan segera membawa seluruh tim dan proyek saya ke React Native.
Sungguh keterlaluan untuk melihat bahwa bug ini masih belum diperbaiki.
Alih-alih mengerjakan Ionic 4, alangkah baiknya untuk memastikan pengiriman kualitas pertama.

ada pekerjaan di sekitar teman-teman?

ada solusi @ionic Team???

Sejujurnya tim ionik memiliki proyek independen yang bagus, seperti kapasitor, yang berguna, ketika saya memutuskan untuk membuat kerangka kerja saya sendiri. Fungsionalitas gulir virtual ionik baru tidak berubah, hanya dikonversi ke stensil (komponen web, mempercepat, tidak didukung oleh semua orang, masalah safari dengannya), jadi jangan menunggu terlalu lama untuk v4. Implementasi gulir virtual ini sangat mendasar. (bug perubahan orientasi layar, item variabel, masalah pemuatan lambat, terlalu kaku, coba selesaikan masalah, apa yang dilakukan browser) Pada tahun 2016, ketika saya memiliki pengetahuan kecil bahkan tentang Angular, meskipun saya telah berada di industri selama beberapa dekade, itu sangat menantang untuk membuat kerangka kerja. Perasaan saya adalah bahwa proyek open source harus diposting 3 siklus setelahnya, ketika konsep dasar sudah ada. Itu benar tentang sudut juga. Untuk membuat gulungan virtual yang fleksibel, yang bahkan tidak ada dalam materi bukanlah tugas yang mudah. ​​Butuh waktu berbulan-bulan, meskipun saya memiliki kerangka kerja yang sangat terintegrasi dengan backend. (Saya tidak yakin, kapan siap, itu adalah satu tahun sekarang) jadi konsep ionik sedikit goyah saat ini, bagaimanapun Anda dapat menggunakan ionic v4 dengan reaksi. Semua kerangka kerja JavaScript tidak memenuhi kebutuhan, apa yang Anda lihat dari aplikasi asli. Itu bagus jika memang ada, tetapi jika ada bug, sayangnya Anda perlu memahami swift, android, dan hal-hal lain juga. c++. Saya dapat membuat jus bahkan jika saya tidak menggunakan komponen web saat ini, jadi kecepatannya baik-baik saja, dan aplikasi hybrid akan menjadi norma, setidaknya karena pwa, tetapi itu membutuhkan lebih banyak keahlian, daripada jika Anda hanya pergi ke asli. (seseorang perlu mengembangkan dua kali) tidak ada plugin open source yang benar-benar dapat diandalkan.

Saat ini tim saya tidak bekerja lagi di ionic karena ini. Menakjubkan !!!

Masalah ini telah diidentifikasi secara otomatis sebagai masalah Ionic 3. Kami baru-baru ini memindahkan Ionic 3 ke repositorinya sendiri. Saya memindahkan masalah ini ke repositori untuk Ionic 3. Harap lacak masalah ini di sana.

Jika saya melakukan kesalahan, dan jika masalah ini masih relevan dengan Ionic 4, beri tahu tim Ionic Framework!

Terima kasih telah menggunakan Ionic!

Masalah dipindahkan ke: https://github.com/ionic-team/ionic-v3/issues/210