Ionic-framework: ion-img en virtualScroll no muestra imágenes como se esperaba

Puedo confirmar este problema. Veo un comportamiento similar en mi aplicación y también estoy usando Ionic Framework 3.0.1.

Investigar el DOM durante el desplazamiento muestra que el atributo class de algunos componentes ion-image cambia de "img -loaded" a "img-unloaded" aunque los componentes todavía están en la ventana de visualización visible.

¡Hola, todos! ¿Les importaría probar lo último cada noche y ver si esto sigue siendo un problema? Para instalar el nightly de ionic-angular puede ejecutar npm install ionic-angular<strong i="6">@nightly</strong> --save en su proyecto. ¡Gracias!

Sí, sigue sucediendo :(

Para mí también. El problema persiste con la corriente nocturna.

también pasa con * ngFor

Tengo lo que supongo que es un problema relacionado. Mis imágenes para las miniaturas tienen diferentes alturas y 300 píxeles de ancho. Estos solían recortarse como se esperaba en v2 ahora no aparecen imágenes en absoluto.

Lo mismo aquí ... se quedó en blanco con una 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
¿No parece curarse con 3.1.0?
Se usó 'servicio iónico' en el escritorio Chrome (Win 10) para probar.
Muchos círculos grises en lugar de imágenes hasta que se desplacen hacia abajo durante bastante tiempo, algunas imágenes y luego vuelven a los círculos grises ...

CLI de Córdoba: 6.5.0
Versión del marco iónico: 3.1.0
Versión Ionic CLI: 2.2.2
Versión Ionic App Lib: 2.2.1
Versión de scripts de la aplicación iónica: 1.3.4
ios-deploy versión: No instalado
versión ios-sim: No instalado
SO: Windows 10
Versión de nodo: v6.10.0
Versión de Xcode: no instalado

También intenté actualizar a 3.1.0 -> el problema sigue presente

Para el registro, probado 3.1.1, sigue siendo un problema.

También probé 3.1.1 - sigue siendo un problema.

Este es un problema antiguo, presente desde RC4, todas las informaciones se pueden encontrar en # 9660

@ jgw96 puede reproducir fácilmente con Ionic 3.1.1 aquí https://github.com/shprink/ionic-withwebworker-vs-withoutwebworker

Para que conste, tengo un componente que me gustaría hacer una funcionalidad similar a la que usa Canvas. :)
¿Alguien puede crear un componente común de "lienzo de iones" para la carga diferida? :)

teniendo el mismo problema: /

teniendo el mismo problema :)

Hola, estoy teniendo el mismo problema, en mi caso ... las primeras imágenes no se muestran ... luego, si me desplazo de abajo hacia abajo, las imágenes comienzan a aparecer pero solo las que están en la parte inferior ... desplazarse hacia arriba no hace que aparezcan las primeras imágenes ...

  <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 es el html cuando no se muestran:
<ion-img class="img-unloaded" ng-reflect-src="assets/img/1.jpg" ng-reflect-width="705px" ng-reflect-height="705px"> <img> </ion-img>
al 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>

Encontré el error. En este comentario, https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 hay dos posibles soluciones para esto.

También obtengo esto, como se explica aquí. Este golpe también demuestra el problema.

Aquí igual. Sigo teniendo el 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

Estaba viendo este problema, pero lo solucioné con este truco de estilo temporal:

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

y esta regla CSS:

    ion-label {
        height: 100%;
    }

No digo que sea LA solución, pero hace que el problema desaparezca.

Aún sin arreglar. Ninguna de las soluciones sugeridas aquí y en otro problema funciona correctamente. ¿Cómo se supone que vamos a desplazar suavemente una lista de cientos de miniaturas pequeñas cuando el desplazamiento infinito como reemplazo no es una opción? Este es un caso de uso muy básico en dispositivos móviles ...

Puede utilizar la imagen independiente ng-lazyload-image. Me parece que funciona, solo necesito verificar el tiempo de carga, ya que para mí fue un poco pesado. (tal vez por alguna razón diferente, lo que ya resolví: el lienzo no debería ir al desplazamiento iónico, ya que estaba muy inestable)

Como tengo un cronograma estricto del proyecto, es posible que más adelante eche un vistazo a este molesto error.
Me he dado cuenta de que no es gran cosa. He hecho una corrección iónica nativa, hace un momento.

Usted (bubbleguuum) también puede depurarlo, si desea aprender cosas. Puede que no sea tan importante, solo que nadie lo había mirado. (Creo que se está realizando un rediseño, pero la corrección temporal del error debería haberse publicado) Soy un desarrollador independiente, así que si lo arreglas, estaré feliz, no es necesario. :)

De todos modos, Angular necesita mensajes de error significativos, la mayor parte del dolor proviene de allí.
El seguimiento de seguimiento no muestra la persona que llama a su aplicación, solo algún tipo de error de paquete web / promesa siempre desde un nivel más profundo.

Es increíble que esto no funcione. @bubbleguuum lo golpeó en la cabeza.

Esto es absolutamente inaceptable. Casi todas las aplicaciones requieren la funcionalidad en cuestión que no funciona. Además, es inquietante que haya un problema # 9660 de diciembre de 2016 y aún no se haya solucionado ... :(

También tengo el mismo problema. Usé el json para obtener los datos y * ngFor para mostrar los datos en la interfaz. Pero, parece que la etiqueta img en ion-img permanece en blanco debido a algunas razones.

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

pero el resultado es así

También tengo el mismo problema que el chico de arriba.
Este es el codigo

Esta es la salida

Tuve un problema similar hace un tiempo. Solucioné mi problema usando la función de matriz de mapas para cambiar la URL de la imagen. Entonces necesitas algo como: -

y en el archivo .ts

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

Estoy usando la función de mapa mientras llamo al servicio:
El servicio

El archivo .ts

También tengo el mismo problema dentro de un * ngfor. Me estoy cambiando a esperando una solución !!

no está funcionando, ¿cuál es la solución?

@karimessouabni tengo una solución con respecto a este problema. Podemos usar directamente la etiqueta img para evitar una imagen en blanco.
<img src="{{product.img}}">

@ shahid27125 esta no es la solución ya que todas las imágenes se cargarán instantáneamente. Tener una lista con más de 100 elementos con imágenes agotará el rendimiento y los datos móviles si lo hace.

@fdambrosio En este comentario, https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 son dos posibles soluciones para esto.

gracias @DavidWiesner

Otro desarrollador frustrado interviniendo ... En serio chicos, arreglen esa mierda.

Estoy de acuerdo con @tomcatmwi

¿Tiene planes de solucionar este problema?

Vaya, no puedo creer cuánto tiempo la gente ha estado esperando esto ... Esperando una solución ahora, también.

Para todos los que solo estén preocupados por la carga de imágenes, pueden mirar el módulo ng2-lazyload-image. https://www.npmjs.com/package/ng2-lazyload-image

Lo estoy usando con miles de filas en producción y parece estar funcionando bien.

Bueno, esto no es del todo cierto:

1. primero, tendrá que actualizar su componente (es decir, si sus artículos son en realidad componentes personalizados)
2. cada componente necesita su propia referencia al contenido de iones
3. por supuesto, las primeras imágenes no se cargarán hasta que se desplace
4. en qué estado, empiezas a pensar en eliminar la lista virtual que también estás usando
6. git checkout .
7. comience a esperar que el equipo iónico @adamdbradley note que el problema no ha sido resuelto desde principios de 2017.
8. espera a que se arregle.

Sigue siendo el mismo error ...

Sameeeeeeee aquí

Sí, sigue siendo un error.
Estoy esperando una solución. Mientras tanto, usaré esto: https://www.npmjs.com/package/ng-lazyload-image

Si hay una mejor solución, no dudes en decírmelo :)

Cambiar <ion-img [src]="url"></ion-img> a <img [src]="url"> Funciona para mí

Tener este problema también. @ dm-grinko usando img no admite la carga diferida, lo cual es importante si tiene muchas imágenes.

Tenía imágenes en la matriz que había descargado del servidor ahora quiero mostrarlas eny use el desplazamiento virtual, pero las imágenes no se representan, solo se muestran 1-2 imágenes.
aquí está mi 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 cambiar ion-img a img
ion-img no funciona

<img> tampoco funciona en virtualscroll porque tenía una matriz en la que el valor de la imagen se almacena en la cadena base64.

Increíble ... Creo que me apresuraré en conseguir que todo mi equipo y proyectos utilicen React Native.
Es indignante ver que este error aún no se ha solucionado.
En lugar de trabajar en Ionic 4, sería bueno garantizar entregas de primera calidad.

¿Algún trabajo con chicos?

alguna solución @ionic Team ???

Para ser honesto, el equipo iónico tiene un buen proyecto independiente, como condensador, que fue útil cuando decidí crear mi propio marco. La nueva funcionalidad de desplazamiento virtual iónico no cambió, simplemente se convirtió en plantilla (componente web, aceleración, no compatible con todos, problemas de safari hws con él), así que no espere demasiado para v4. Esta implementación de desplazamiento virtual es muy básica. (error de cambio de orientación de pantalla, elementos variables, problemas de carga diferida, demasiado rígido, trato de resolver problemas, qué hace el navegador) En 2016, cuando tenía poco conocimiento incluso sobre Angular, aunque he estado en la industria durante décadas, era muy desafiante para hacer un marco. Mi intuición es que los proyectos de código abierto deben publicarse 3 ciclos después, cuando los conceptos básicos estén en su lugar. También es cierto sobre angular. Crear un scroll virtual tan flexible, que no existe ni siquiera en el material, no es una tarea fácil. Me tomó un mes, aunque tengo un framework que se integra en gran medida con el backend. (no estoy seguro, cuando esté listo, es un año ahora) por lo que el concepto iónico es un poco inestable hoy en día, de todos modos puedes usar iónico v4 con react. Todo el marco de JavaScript no satisface las necesidades, lo que ves en las aplicaciones nativas. Es bueno si existe, pero si hay un error, desafortunadamente necesita comprender Swift, Android y otras cosas también. c ++. Pude sacar algo de jugo incluso si no uso componentes web en este momento, por lo que la velocidad es buena y las aplicaciones híbridas serán la norma, sin duda al menos debido a pwa, pero requiere muchas más habilidades que si solo vas a nativo. (alguien necesita desarrollar dos veces) ningún complemento de código abierto era realmente confiable.

Actualmente mi equipo ya no trabaja en iónico porque estos. Increible !!!

Este problema se ha identificado automáticamente como un problema de Ionic 3. Recientemente trasladamos Ionic 3 a su propio repositorio. Voy a mover este problema al repositorio de Ionic 3. Por favor, haga un seguimiento de este problema allí.

Si he cometido un error y este problema sigue siendo relevante para Ionic 4, ¡infórmeselo al equipo de Ionic Framework!

¡Gracias por usar Ionic!

El problema se trasladó a: https://github.com/ionic-team/ionic-v3/issues/210