Ionic-framework: ion-img в virtualScroll не отображает изображения должным образом

Я могу подтвердить эту проблему. Я наблюдаю аналогичное поведение в своем приложении, и я также использую Ionic Framework 3.0.1.

Исследование DOM во время прокрутки показывает, что атрибут class некоторых компонентов ion-image изменяется с "img-loaded" на "img-unloaded", хотя компоненты все еще находятся в видимом окне просмотра.

Всем привет! Не могли бы вы, ребята, попробовать последнюю версию Nightly и посмотреть, остается ли это проблемой? Чтобы установить ночную версию ionic-angular вы можете запустить npm install ionic-angular<strong i="6">@nightly</strong> --save в своем проекте. Спасибо!

Да, все еще происходит :(

Для меня тоже. Проблема сохраняется с текущим ночным временем.

это случилось с * ngFor тоже

У меня есть то, что, как я полагаю, связано с этим. Все мои изображения для миниатюр имеют разную высоту и ширину 300 пикселей. Раньше они были обрезаны, как и ожидалось в версии 2, теперь изображения не отображаются вообще.

То же самое ... пусто со списком миниатюр размером 80x80 пикселей

    <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?
Для тестирования использовал ionic serve на настольном Chrome (Win 10).
Множество серых кругов вместо изображений, пока не прокрутите вниз, затем некоторые изображения вернутся к серым кругам ...

Кордова CLI: 6.5.0
Версия Ionic Framework: 3.1.0
Версия Ionic CLI: 2.2.2
Версия Ionic App Lib: 2.2.1
Версия Ionic App Scripts: 1.3.4
Версия ios-deploy: не установлена
версия для 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-canvas" для ленивой загрузки? :)

с той же проблемой: /

с той же проблемой :)

Привет, у меня такая же проблема, в моем случае ... первые изображения не отображаются ... тогда, если я прокручиваю вниз до самого низа, изображения начинают появляться, но только те, которые находятся внизу ... при прокрутке вверх не появляются первые изображения ...

  <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. Мне кажется, что это работает, просто мне нужно проверить время загрузки, так как для меня это было немного тяжеловато. (возможно, по какой-то другой причине, которую я уже решил - холст не должен переходить в ионную прокрутку, так как он был очень шатким)

Поскольку у меня строгие сроки проекта, я, возможно, посмотрю на эту досадную ошибку позже.
Я понял, что в этом нет ничего страшного. Я только что сделал некоторое исправление с ионной системой.

Вы (bubbleguuum) также можете отладить его, если хотите что-то узнать. Возможно, это не так уж и важно, просто никто не взглянул на это. (Думаю, происходит некоторый редизайн, но временное исправление ошибки должно было быть опубликовано) Я независимый разработчик, поэтому, если вы исправите его, я буду счастлив, что мне это не нужно. :)

В любом случае 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.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. Надеюсь, команда ionic @adamdbradley заметит, что проблема не
8. ждать исправления.

Все тот же баг ..

Sameeeeeeee здесь

Да все еще ошибка.
Жду исправления. А пока я буду использовать это: https://www.npmjs.com/package/ng-lazyload-image

Если есть лучшее решение, пожалуйста, сообщите мне :)

Измените <ion-img [src]="url"></ion-img> на <img [src]="url"> меня работает

Имея эту проблему тоже. @ dm-grinko при использовании img не поддерживает отложенную загрузку, что важно, если у вас много изображений.

У меня были изображения в массиве, которые я загрузил с сервера, теперь я хочу показать его ви использовать виртуальную прокрутку, но изображения не отображаются, отображаются только 1-2 изображения.
вот мой код.

<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
ion-img не работает

<img> также не работает в virtualscroll, потому что у меня был массив, в котором значение изображения хранится в строке base64.

Невероятно ... Думаю, я скоро переведу всю свою команду и проекты на React Native.
Возмутительно видеть, что эта ошибка до сих пор не исправлена.
Вместо того, чтобы работать над Ionic 4, было бы неплохо обеспечить поставки высочайшего качества.

какая-нибудь работа, ребята?

любое решение @ionic Team ???

Честно говоря, у ionic team есть хороший независимый проект, вроде конденсатора, который пригодился, когда я решил создать свой собственный фреймворк. Новая функциональность ионной виртуальной прокрутки не изменилась, просто преобразована в трафарет (веб-компонент, ускорение, не поддерживается всеми, проблемы с safari hws), так что не ждите слишком долго для v4. Эта реализация виртуальной прокрутки очень проста. (ошибка изменения ориентации экрана, переменные элементы, проблемы с ленивой загрузкой, слишком жесткие, попытка решить проблемы, что делает браузер) В 2016 году, когда у меня были небольшие знания даже об Angular, хотя я проработал в отрасли несколько десятилетий, это было очень сложно сделать каркас. Мне кажется, что проекты с открытым исходным кодом следует публиковать через 3 цикла, когда основные концепции будут готовы. То же самое и с angular. Создать такую ​​гибкую виртуальную прокрутку, которой нет даже в материалах, - непростая задача. Мне потребовался месяц, хотя у меня есть фреймворк, который сильно интегрируется с бэкэндом. (я не уверен, когда будет готов, прошел год), так что концепция ionic в настоящее время немного шаткая, в любом случае вы можете использовать ionic v4 с реакцией. Все фреймворки JavaScript не соответствуют потребностям, которые вы видите в нативных приложениях. Хорошо, если он существует, но если есть ошибка, вам, к сожалению, нужно разбираться в Swift, Android и других вещах. c ++. Мне удалось выжить немного, даже если я не использую в настоящее время веб-компоненты, поэтому скорость в порядке, и гибридные приложения будут нормой, без вопросов, по крайней мере, из-за pwa, но для этого требуется гораздо больше навыков, чем если просто зайти на родной. (кто-то должен разработать два раза) ни один плагин с открытым исходным кодом не был действительно надежным.

В настоящее время моя команда больше не работает с ionic, потому что они. Невероятный !!!

Эта проблема была автоматически определена как проблема Ionic 3. Недавно мы переместили Ionic 3 в собственный репозиторий. Я перемещаю эту проблему в репозиторий для Ionic 3. Проследите за этой проблемой там.

Если я допустил ошибку и эта проблема все еще актуальна для Ionic 4, сообщите об этом команде Ionic Framework!

Спасибо за использование Ionic!

Проблема перемещена по адресу :