Ionic-framework: ion-img em virtualScroll não exibe imagens conforme o esperado

Eu posso confirmar esse problema. Estou vendo um comportamento semelhante em meu aplicativo e também estou usando o Ionic Framework 3.0.1.

Investigar o DOM durante a rolagem mostra que o atributo class de alguns componentes ion-image muda de "img-carregado" para "img-descarregado", embora os componentes ainda estejam na janela de visualização visível.

Olá pessoal! Vocês se importariam de experimentar o último noturno e ver se isso ainda é um problema? Para instalar o nightly de ionic-angular você pode executar npm install ionic-angular<strong i="6">@nightly</strong> --save em seu projeto. Obrigado!

Sim, ainda está acontecendo :(

Para mim também. O problema persiste com o atual noturno.

isso acontece com * ngFor também

Tenho o que presumo ser um problema relacionado. Minhas imagens para as miniaturas têm alturas diferentes e 300 px de largura. Eles costumavam ser cortados conforme esperado na v2, agora nenhuma imagem aparece.

O mesmo aqui .. ficou em branco com uma lista de miniaturas de 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>

envioronment.txt
Não parece curado usando 3.1.0?
Usado 'serviço iônico' no Chrome desktop (Win 10) para testar.
Muitos círculos cinzas em vez de imagens até rolar para baixo algumas imagens e depois voltar aos círculos cinzas ...

Cordova CLI: 6.5.0
Versão Ionic Framework: 3.1.0
Versão Ionic CLI: 2.2.2
Versão Ionic App Lib: 2.2.1
Versão dos scripts do aplicativo Ionic: 1.3.4
versão ios-deploy: não instalado
versão ios-sim: não instalado
SO: Windows 10
Versão do nó: v6.10.0
Versão do Xcode: não instalada

Também tentei atualizar para 3.1.0 -> o problema ainda está presente

Para que conste - tentei 3.1.1 - ainda é um problema.

Eu também tentei 3.1.1 - ainda é um problema.

Este é um problema antigo - presente desde RC4 - todas as informações podem ser encontradas em # 9660

@ jgw96 você pode reproduzir facilmente com Ionic 3.1.1 aqui https://github.com/shprink/ionic-withwebworker-vs-withoutwebworker

Para registro, eu tenho um componente que gostaria de ter uma funcionalidade semelhante ao que está usando o canvas. :)
Alguém pode fazer um componente "ion-canvas" comum para carregamento lento? :)

tendo o mesmo problema: /

tendo o mesmo problema :)

Olá Estou tendo o mesmo problema, no meu caso ... as primeiras imagens não estão aparecendo ... então se eu rolar de baixo para baixo as imagens começam a aparecer, mas apenas as que estão no fundo ... rolar para cima não faz com que as primeiras imagens apareçam ...

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

Este é o html quando eles não estão sendo exibidos:
<ion-img class="img-unloaded" ng-reflect-src="assets/img/1.jpg" ng-reflect-width="705px" ng-reflect-height="705px"> <img> </ion-img>
ao mostrar:
<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>

Eu encontrei o bug. Neste comentário, https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 são duas soluções alternativas possíveis para isso.

Eu também estou entendendo isso, conforme explicado aqui. Este golpe também demonstra o problema.

Mesmo aqui. Ainda tendo o problema

$ 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

Eu estava vendo esse problema, mas resolvi com este hack temporário de estilo:

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

e esta regra css:

    ion-label {
        height: 100%;
    }

Não estou dizendo que é a solução, mas faz com que o problema desapareça.

Ainda não corrigido. Nenhuma das soluções alternativas sugeridas aqui e em outro problema funcionam corretamente. Como podemos rolar suavemente uma lista de centenas de pequenas miniaturas quando a rolagem infinita como uma substituição não é uma opção? Este é um caso de uso muito básico no celular ...

Você pode usar a imagem independente ng-lazyload. Parece-me a funcionar, só preciso verificar algum tempo de carregamento, pois para mim ficou um pouco pesado. (talvez por algum motivo diferente, o que eu já resolvi - a tela não deve ir para a rolagem iônica, pois estava muito trêmula)

Como tenho um cronograma de projeto restrito, posso dar uma olhada neste bug irritante mais tarde.
Percebi que não é grande coisa. Eu fiz alguns reparos nativos iônicos, agora há pouco.

Você (bubbleguuum) pode depurá-lo também, se quiser aprender coisas. Pode não ser grande coisa, apenas ninguém olhou para ele. (algumas reformulações estão acontecendo, eu acho, mas a correção temporária do bug deveria ter sido postada) Sou um desenvolvedor independente, então se você consertar, ficarei feliz, pois não preciso fazer isso. :)

De qualquer forma, o Angular precisa de mensagens de erro significativas, a maior parte da dor vem de lá.
O rastreamento de trilha não mostra o chamador de seu aplicativo, apenas algum tipo de erro de webpack / promessa sempre de um nível mais profundo.

É inacreditável que isso não esteja funcionando. @bubbleguuum acertou na cabeça.

Isso é absolutamente inaceitável. Cada aplicativo requer a funcionalidade em questão que não funciona. Além disso, é preocupante que haja um problema nº 9660 de dezembro de 2016 e ele ainda não foi corrigido ... :(

Também estou tendo o mesmo problema. Usei o json para obter os dados e * ngFor para mostrar os dados no frontend. Mas, parece que a tag img em ion-img permanece em branco por alguns motivos.

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

mas o resultado é assim

Também estou tendo o mesmo problema que o cara acima de mim.
Este é o código

Esta é a saída

Eu tive um problema semelhante um tempo atrás. Corrigi meu problema usando a função de matriz de mapa para alterar o URL da imagem. Então você precisa de algo como: -

e no arquivo .ts

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

Estou usando a função de mapa ao chamar o serviço:
O serviço

O arquivo .ts

Também estou tendo o mesmo problema dentro de um * ngfor. Estou mudando para enquanto espera por uma solução !!

não está funcionando, qual é a solução alternativa?!?

@karimessouabni , tenho uma solução para esse problema. Podemos usar diretamente a tag img para evitar a imagem em branco.
<img src="{{product.img}}">

@ shahid27125 esta não é a solução, pois todas as imagens serão carregadas instantaneamente. Ter uma lista com mais de 100 itens com imagens drenará o desempenho e os dados móveis.

@fdambrosio Neste comentário https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 são duas soluções possíveis para isso.

obrigado @DavidWiesner

Mais um desenvolvedor frustrado entrando na conversa ... Sério, pessoal, consertem essa porcaria.

Concordo com @tomcatmwi

Algum plano para corrigir esse problema?

Uau, não posso acreditar há quanto tempo as pessoas estão esperando por isso ... Esperando por uma correção agora, também.

Para todos que estão apenas preocupados com o carregamento da imagem, você pode olhar o módulo ng2-lazyload-image. https://www.npmjs.com/package/ng2-lazyload-image

Estou usando isso com milhares de linhas em produção e parece estar funcionando bem.

Bem, isso não é totalmente verdade:

1. primeiro, você terá que atualizar seu componente (ou seja, se seus itens forem realmente componentes personalizados)
2. cada componente precisa então de sua própria referência ao conteúdo de íons
3. é claro que as primeiras imagens não carregarão até que você role
4. em que estado, você começa a pensar em remover a lista virtual que também está usando
6. git checkout .
7. comece a torcer para que a equipe iônica @adamdbradley perceba que o problema não foi resolvido desde o início de 2017.
8. aguarde a correção.

Continua o mesmo bug ..

Sameeeeeeee aqui

Sim, ainda é um bug.
Estou esperando por uma correção. Enquanto isso, estarei usando: https://www.npmjs.com/package/ng-lazyload-image

Se houver uma solução melhor, sinta-se à vontade para me dizer :)

Alterar <ion-img [src]="url"></ion-img> para <img [src]="url"> Funciona para mim

Tendo esse problema também. @ dm-grinko usando img não suporta carregamento lento, o que é importante se você tiver muitas imagens.

Eu tinha imagens no array que baixei do servidor e agora quero mostrá-las noe usar rolagem virtual, mas as imagens não são renderizadas, apenas 1-2 imagens são exibidas.
aqui está meu código.

<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 mude ion-img para img
ion-img não funciona

<img> também não funciona no virtualscroll porque eu tinha um array no qual o valor da imagem é armazenado na string base64.

Incrível ... Acho que vou ser rápido em colocar toda a minha equipe e projetos no React Native.
É ultrajante ver que esse bug ainda não foi corrigido.
Em vez de trabalhar no Ionic 4, seria bom garantir entregas de primeira qualidade.

algum trabalho em torno de caras?

alguma solução @ionic Team ???

Para ser honesto, a equipe iônica tem um bom projeto independente, como capacitor, que foi útil, quando decidi criar meu próprio framework. A nova funcionalidade de rolagem virtual iônica não mudou, apenas foi convertida em estêncil (componente da web, acelerar, não é suportado por todos, problemas de suporte de safari com ele), então não espere muito pela v4. Esta implementação de rolagem virtual é muito básica. (bug de mudança de orientação de tela, itens variáveis, problemas de carregamento lento, muito rígido, tentar resolver problemas, o que o navegador faz) Em 2016, quando eu tinha pouco conhecimento até mesmo sobre Angular, embora já estivesse na indústria há décadas, era muito desafiador fazer uma estrutura. Meu pressentimento é que os projetos de código aberto devem ser postados 3 ciclos depois, quando os conceitos básicos estiverem prontos. É verdade sobre angular também. Criar um pergaminho virtual tão flexível, que não existe nem no material, não é uma tarefa fácil. Levei um mês, embora eu tenha um framework que se integra fortemente com o backend. (não tenho certeza, quando estiver pronto, é um ano agora) então o conceito iônico é um pouco instável hoje em dia, de qualquer forma você pode usar o v4 iônico com reag. Todo o framework JavaScript não atende às necessidades, o que você vê de aplicativos nativos. É bom se existir, mas se houver um bug, infelizmente você precisa entender o swift, android e outras coisas também. c ++. Consegui fazer um pouco de suco mesmo sem usar componentes da web no momento, então a velocidade é boa e os aplicativos híbridos serão a norma, sem dúvida pelo menos por causa do pwa, mas requer muito mais conjunto de habilidades do que se você apenas for para o nativo. (alguém precisa desenvolver duas vezes) nenhum plugin de código aberto era realmente confiável.

Atualmente minha equipe não trabalha mais em iônicos por causa desses. Incrível !!!

Esse problema foi identificado automaticamente como um problema do Ionic 3. Recentemente, movemos o Ionic 3 para seu próprio repositório. Estou movendo este problema para o repositório do Ionic 3. Acompanhe esse problema lá.

Se eu cometi um erro e o problema ainda é relevante para o Ionic 4, avise a equipe do Ionic Framework!

Obrigado por usar o Ionic!

Problema movido para: https://github.com/ionic-team/ionic-v3/issues/210