Ionic-framework: لا تعرض ion-img في virtualScroll الصور كما هو متوقع

أستطيع أن أؤكد هذه المشكلة. أرى سلوكًا مشابهًا في تطبيقي وأنا أيضًا أستخدم Ionic Framework 3.0.1.

يوضح التحقيق في DOM أثناء التمرير أن السمة class لبعض مكونات ion-image تتغير من "img-portable" إلى "img-unloaded" على الرغم من أن المكونات لا تزال في إطار العرض المرئي.

مرحبا بالجميع! هل تمانع في تجربة أحدث العروض كل ليلة ومعرفة ما إذا كانت هذه مشكلة لا تزال قائمة؟ لتثبيت ionic-angular ليلة يمكنك تشغيل npm install ionic-angular<strong i="6">@nightly</strong> --save في مشروعك. شكرا!

نعم ، مازال يحدث :(

لي أيضا. استمرت المشكلة مع الليلة الحالية.

يحدث ذلك مع * ngFor أيضًا

لدي ما أفترضه هو قضية ذات صلة. صوري للصور المصغرة كلها ارتفاعات مختلفة وعرض 300 بكسل. كان يتم اقتصاصها كما هو متوقع في الإصدار 2 الآن لا تظهر أي صور على الإطلاق.

نفس الشيء .. أصبح فارغًا بقائمة صور مصغرة 80 × 80 بكسل

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

envioronment.txt
لا يبدو أنه تم علاجه باستخدام 3.1.0؟
تم استخدام "أيوني الخدمة" على سطح المكتب Chrome (نظام التشغيل Win 10) للاختبار.
الكثير من الدوائر الرمادية بدلاً من الصور حتى قم بالتمرير لأسفل للحصول على طريقة معينة لبعض الصور ثم العودة إلى الدوائر الرمادية ...

كوردوفا CLI: 6.5.0
إصدار الإطار الأيوني: 3.1.0
إصدار أيوني CLI: 2.2.2
إصدار ليب التطبيق الأيوني: 2.2.1
إصدار البرامج النصية للتطبيق الأيوني: 1.3.4
إصدار ios-publish: غير مثبت
إصدار ios-sim: غير مثبت
نظام التشغيل: Windows 10
إصدار العقدة: v6.10.0
إصدار Xcode: غير مثبت

حاول أيضًا التحديث إلى الإصدار 3.1.0 -> لا تزال المشكلة موجودة

للتسجيل - حاول 3.1.1 - لا تزال مشكلة.

لقد حاولت أيضًا 3.1.1 - لا تزال مشكلة.

هذه مشكلة قديمة - موجودة منذ RC4 - يمكن العثور على جميع المعلومات في # 9660

@ jgw96 يمكنك بسهولة إعادة الإنتاج باستخدام Ionic 3.1.1 هنا https://github.com/shprink/ionic-withwebworker-vs-withoutwebworker

بالنسبة للسجل ، لدي مكون أود أن أقوم بوظيفة مماثلة لأنه يستخدم لوحة الرسم. :)
هل يمكن لأي شخص أن يصنع مكون "قماش أيوني" شائع للتحميل البطيء؟ :)

تواجه نفس المشكلة: /

تواجه نفس المشكلة :)

مرحبًا ، أواجه نفس المشكلة ، في حالتي ... الصور الأولى لا تظهر ... ثم إذا قمت بالتمرير لأسفل إلى أسفل ، تبدأ الصور في الظهور ولكن فقط الصور الموجودة في الأسفل ... التمرير لأعلى لا يجعل صور القبضة تظهر ...

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

هذا هو html عندما لا يتم عرضها:
<ion-img class="img-unloaded" ng-reflect-src="assets/img/1.jpg" ng-reflect-width="705px" ng-reflect-height="705px"> <img> </ion-img>
عندما تظهر:
<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>

لقد وجدت الخطأ. في هذا التعليق https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 هما حلين محتملين لهذا الغرض.

أنا أيضا أحصل على هذا ، كما هو موضح هنا. يوضح هذا المربع أيضًا المشكلة.

كذلك هنا. لا تزال تواجه المشكلة

$ 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

كنت أرى هذه المشكلة ولكن تم إصلاحها من خلال اختراق النمط المؤقت هذا:

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

وقاعدة css هذه:

    ion-label {
        height: 100%;
    }

لا أقول إنه الحل ولكنه يجعل المشكلة تختفي.

لا يزال غير مثبت. لا يعمل أي من الحلول البديلة المقترحة هنا وفي مشكلة أخرى بشكل صحيح. كيف يُفترض بنا أن ننتقل بسلاسة إلى قائمة من مئات الصور المصغرة الصغيرة عندما لا يكون التمرير اللانهائي كبديل خيارًا؟ هذه حالة استخدام أساسية جدًا على الهاتف المحمول ...

يمكنك استخدام صيغة ng-lazyload-image المستقلة. يبدو لي أنه يعمل ، فقط أحتاج إلى التحقق من بعض وقت التحميل ، بالنسبة لي كان ثقيلًا بعض الشيء. (ربما لسبب مختلف ، ما قمت بحله بالفعل - لا ينبغي أن تنتقل اللوحة القماشية إلى التمرير الأيوني ، لأنها كانت مهتزة للغاية)

نظرًا لأن لدي جدول زمني صارم للمشروع ، فقد ألقي نظرة على هذا الخطأ المزعج لاحقًا.
لقد أدركت أنها ليست مشكلة كبيرة. لقد أجريت بعض الإصلاح الأيوني الأصلي ، الآن.

أنت (Bubbleleguuum) قد تصححه أيضًا ، إذا كنت حريصًا على تعلم الأشياء. قد لا يكون الأمر بهذه الأهمية ، فقط لم ينظر إليه أحد. (بعض إعادة التصميم تحدث على ما أعتقد ، ولكن كان يجب نشر الإصلاح المؤقت للأخطاء) أنا مطور مستقل ، لذلك إذا قمت بإصلاحه ، سأكون سعيدًا ، لأنني لست بحاجة إلى ذلك. :)

على أي حال ، يحتاج Angular إلى رسائل خطأ ذات مغزى ، فمعظم الألم يأتي من هناك.
لا يُظهر تتبع المسار المتصل بتطبيقك ، فقط نوعًا من أخطاء webpack / الوعد دائمًا من مستوى أعمق.

إنه أمر لا يصدق أن هذا لا يعمل. ضربه bubbleguuum على رأسه.

هذا غير مقبول على الإطلاق. يتطلب كل تطبيق تقريبًا الوظيفة المعنية التي لا تعمل. أيضًا أن هناك مشكلة # 9660 من ديسمبر 2016 وما زالت غير ثابتة أمر مقلق ... :(

أنا أيضا أواجه نفس المشكلة. لقد استخدمت json للحصول على البيانات و * ngFor لعرض البيانات على الواجهة الأمامية. ولكن ، يبدو أن علامة img في ion-img تظل فارغة نظرًا لبعض الأسباب.

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

لكن النتيجة تسير على هذا النحو

أنا أيضًا أواجه نفس المشكلة مثل الرجل فوقي.
هذا هو الكود

هذا هو الناتج

كان لدي مشكلة مماثلة منذ فترة. لقد أصلحت مشكلتي باستخدام وظيفة مصفوفة الخريطة لتغيير عنوان URL للصورة. لذلك أنت بحاجة إلى شيء مثل: -

وفي ملف .ts

this.pizzaList = this.pizzaList.map ((pizzas) => {
pizzas.imgUrl = "./assets/" + pizzas.imgUrl + ".jpg" ؛
عودة البيتزا
}) ؛

أستخدم وظيفة الخريطة أثناء الاتصال بالخدمة:
الخدمة

ملف .ts

أواجه نفس المشكلة داخل * ngfor. أنا أقوم بالتبديل إلى بينما تنتظر الحل !!

انها لا تعمل ، ما الحل؟!؟

karimessouabni لدي حل بخصوص هذه القضية. يمكننا استخدام علامة img مباشرة لتجنب الصورة الفارغة.
<img src="{{product.img}}">

@ shahid27125 هذا ليس الحل لأنه سيتم تحميل جميع الصور على الفور. سيؤدي وجود قائمة تحتوي على أكثر من 100 عنصر مع الصور إلى استنزاف الأداء وبيانات الجوال في حالة القيام بذلك.

fdambrosio في هذا التعليق https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 هما حلين محتملين لهذا.

شكرا @ DavidWiesner

هناك مطور آخر محبط يتدخل ... بجدية يا رفاق ، أصلح هذا الهراء.

أتفق مع tomcatmwi

أي خطط لإصلاح هذه المشكلة؟

واو ، لا أصدق كم من الوقت ينتظر الناس هذا ... في انتظار الإصلاح الآن ، أيضًا.

لكل من يهتم فقط بتحميل الصورة ، يمكنك إلقاء نظرة على الوحدة النمطية ng2-lazyload-image. https://www.npmjs.com/package/ng2-lazyload-image

أنا أستخدم ذلك مع آلاف الصفوف في الإنتاج ويبدو أنه يعمل بشكل جيد.

حسنًا ، هذا ليس صحيحًا تمامًا:

1. أولاً ، سيتعين عليك تحديث المكون الخاص بك (أي إذا كانت عناصرك مكونات مخصصة بالفعل)
2. يحتاج كل مكون بعد ذلك إلى مرجع خاص به إلى محتوى الأيونات
3. بالطبع لن يتم تحميل بعض الصور الأولى بعد ذلك حتى تقوم بالتمرير
4. في أي حالة ، تبدأ في التفكير في إزالة المبدع الذي تستخدمه أيضًا
6. git checkout .
7. ابدأ على أمل أن يلاحظ الفريق الأيوني
8. انتظر الإصلاح.

لا يزال نفس الخطأ ..

سمعيييييييييييييييييي هنا

نعم لا يزال خطأ.
أنا في انتظار الإصلاح. في هذه الأثناء ، سأستخدم هذا: https://www.npmjs.com/package/ng-lazyload-image

إذا كان هناك أفضل حل ، فلا تتردد في إخباري :)

تغيير <ion-img [src]="url"></ion-img> إلى <img [src]="url"> يعمل بالنسبة لي

وجود هذه المشكلة أيضا. @ dm-grinko باستخدام img لا يدعم التحميل البطيء ، وهو أمر مهم إذا كان لديك الكثير من الصور.

كان لدي صور في مجموعة قمت بتنزيلها من الخادم الآن أريد عرضها بتنسيقواستخدم التمرير الافتراضي ولكن لا يتم عرض الصور فقط يتم عرض صورة أو صورتين.
هذا هو الكود الخاص بي.

<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 قم بتغيير ion-img إلى img
أيون- IM لا يعمل

<img> أيضًا في virtualscroll لأن لدي مصفوفة يتم تخزين قيمة الصورة فيها في سلسلة base64.

لا يصدق ... أعتقد أنني سأكون سريعًا في توصيل فريقي بالكامل ومشاريعي إلى React Native.
إنه لأمر مشين أن نرى أن هذا الخطأ لم يتم إصلاحه بعد.
بدلاً من العمل على Ionic 4 ، سيكون من الجيد ضمان الجودة الأولى للتسليم.

أي عمل حول الرجال؟

اي حل ionic الفريق ؟؟؟

لأكون صادقًا ، فإن الفريق الأيوني لديه مشروع مستقل لطيف ، مثل المكثف ، والذي كان مفيدًا ، عندما قررت إنشاء إطار العمل الخاص بي. لم تتغير وظيفة التمرير الافتراضي الأيوني الجديد ، بل تم تحويلها فقط إلى استنسل (مكون ويب ، تسريع ، لا يدعمها الجميع ، مشاكل سفاري معها) ، لذلك لا تنتظر كثيرًا للإصدار 4. يعد تنفيذ التمرير الافتراضي هذا أساسيًا جدًا. (خطأ في تغيير اتجاه الشاشة ، العناصر المتغيرة ، مشاكل التحميل البطيئة ، جامدة للغاية ، حاول حل المشكلات ، ما يفعله المتصفح) في عام 2016 ، عندما كانت لدي معرفة صغيرة حتى بـ Angular ، على الرغم من أنني كنت في الصناعة منذ عقود ، تحديا لإنشاء إطار. شعوري الداخلي هو أن المشاريع مفتوحة المصدر يجب أن يتم نشرها بعد 3 دورات ، عندما تكون المفاهيم الأساسية في مكانها الصحيح. هذا صحيح عن الزاوي أيضا. إن إنشاء مثل هذا التمرير الافتراضي المرن ، والذي لا يوجد حتى في المواد ، ليس بالمهمة السهلة. استغرقت شهرًا ، على الرغم من أن لدي إطار عمل يتكامل بشكل كبير مع الخلفية. (لست متأكدًا ، عندما تكون جاهزًا ، إنها سنة الآن) لذا فإن المفهوم الأيوني مهتز قليلاً في الوقت الحاضر ، على أي حال يمكنك استخدام أيوني v4 مع التفاعل. كل إطار عمل JavaScript لا يلبي الاحتياجات ، ما تراه من التطبيقات الأصلية. إنه لأمر جيد أن يكون موجودًا ، ولكن إذا كان هناك خطأ ، فأنت بحاجة للأسف إلى فهم سريع ، و android وأشياء أخرى أيضًا. سي ++. لقد تمكنت من صنع بعض العصير حتى لو لم أستخدم مكونات الويب في هذا الوقت ، لذا فإن السرعة جيدة ، وستكون التطبيقات المختلطة هي القاعدة ، بلا شك على الأقل بسبب pwa ، ولكنها تتطلب مجموعة مهارات أكثر بكثير من إذا انتقلت إلى اللغة الأصلية. (يحتاج شخص ما إلى التطوير مرتين) لم يكن هناك مكون إضافي مفتوح المصدر موثوق به حقًا.

حاليا فريقي لم يعد يعمل في الأيونية لأن هذه. رائع !!!

تم تحديد هذه المشكلة تلقائيًا على أنها مشكلة Ionic 3. لقد قمنا مؤخرًا بنقل Ionic 3 إلى مستودعها الخاص. أقوم بنقل هذه المشكلة إلى مستودع Ionic 3. الرجاء تتبع هذه المشكلة هناك.

إذا ارتكبت خطأ ، وإذا كانت هذه المشكلة لا تزال ذات صلة بـ Ionic 4 ، فيرجى إخبار فريق Ionic Framework!

شكرًا لك على استخدام Ionic!

تم نقل الإصدار إلى: https://github.com/ionic-team/ionic-v3/issues/210