Ionic-framework: virtualScroll 中的 ion-img 未按预期显示图像

创建于 2017-04-23  ·  56评论  ·  资料来源: ionic-team/ionic-framework

离子版本：（用“x”检查一个）
[ ] 1.x
[ ] 2.x
[X] 3.x

我正在提交一个...... （用“x”检查一个）
[X] 错误报告
[ ] 功能要求
[ ] 支持请求 => 请不要在此处提交支持请求，请使用以下渠道之一： https : http://ionicworldwide.herokuapp.com/

当前行为：
我正在使用 DOC 中解释的ion-img ，在 virtualScroll 中，但图像没有在第一时间显示（仅灰色框）。 滚动一段时间后，会出现一些图像，再滚动一点后，图像再次消失。

预期行为：
当它们的元素在屏幕上可见时，应该显示图像。

重现步骤：

转到此 plunker： http ://embed.plnkr.co/WblnwO8P1lWgFW2TgVc1/

这是一个简单的联系人列表。 滚动几个联系人，您将看到图像的显示方式。

相关代码：
正如您所看到的， ion-img的用法是在 DOCS 中建议的：

<ion-content padding>

  <ion-list [virtualScroll]="items" approxItemHeight="100px">

    <ion-item *virtualItem="let item">
      <ion-img style="width:100px; height:100px" [src]="item.imgUrl"></ion-img>
      <span>
        <h1>{{item.name}}</h1>
        <p>{{item.phone}}</p>
      </span>
    </ion-item>

  </ion-list>

</ion-content>

其他信息：
对于我一直在调查的内容，在updateImgs函数中，在content.js文件中，所有离子图像的img.top值是相同的（最后一个的位置，类似于1900 像素）。 img.bottom也会发生同样的情况（实际上，问题是img._bounds ）。

这就是为什么在滚动的某个点显示图像的原因，因为此时 img 的边界介于viewableBottom和viewableTop - renderableBuffer 。

无论如何，问题是在img.js的_getBounds方法中，没有this._bounds也没有this._rect属性，因此计算后者（并且从那一刻起使用的结果向前）。 计算此值时，每个元素的边界客户端矩形的值不是最后一个。

IMO 的问题是，在某种程度上， ion-img的边界应该与虚拟滚动节点的边界（在函数updateNodeContext()中更新的边界）相关（此时它们不是） virtual-util.js ）。

离子信息：（从终端/cmd 提示符运行ionic info并粘贴下面的输出）：

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
picture kaikcreator
👍5

最有用的评论

难以置信……我想我会很快让我的整个团队和项目都使用 React Native。
令人震惊的是，这个错误仍未修复。
与其在 Ionic 4 上工作，不如确保一流的交付质量。

picture mopi1402 于 2018-07-01
👍15 ❤1

所有56条评论

我可以确认这个问题。 我在我的应用程序中看到了类似的行为，我也在使用 Ionic Framework 3.0.1。

在滚动过程中调查 DOM 显示，某些ion-image组件的class属性从“img-loaded”更改为“img-unloaded”，尽管这些组件仍在可见视口中。

frankpapenmeier picture frankpapenmeier 于 2017-04-23
👍7

大家好！ 你们介意每晚尝试最新的，看看这是否仍然是一个问题吗？ 要安装ionic-angular每晚，您可以在您的项目中运行npm install ionic-angular<strong i="6">@nightly</strong> --save 。 谢谢！

jgw96 picture jgw96 于 2017-04-24

是的，仍在发生:(

kaikcreator picture kaikcreator 于 2017-04-24
👍4

对我来说也是。 当前每晚问题仍然存在。

frankpapenmeier picture frankpapenmeier 于 2017-04-24
👍1

*ngFor 也会发生这种情况

javico2609 picture javico2609 于 2017-04-25
👍2

我有我认为是一个相关问题。 我的缩略图图像都是不同的高度和 300 像素宽。 这些曾经在 v2 中按预期裁剪，现在根本没有图像出现。

terrycollinson picture terrycollinson 于 2017-04-26

同样在这里.. 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>
gmmx picture gmmx 于 2017-04-27

环境.txt
用3.1.0好像不能治愈？
在桌面 Chrome (Win 10) 上使用“ionic serve”进行测试。
很多灰色圆圈而不是图像，直到向下滚动一些图像然后回到灰色圆圈......

科尔多瓦 CLI：6.5.0
离子框架版本：3.1.0
离子 CLI 版本：2.2.2
离子应用程序库版本：2.2.1
离子应用脚本版本：1.3.4
ios-deploy 版本：未安装
ios-sim 版本：未安装
操作系统：Windows 10
节点版本：v6.10.0
Xcode 版本：未安装

philrob picture philrob 于 2017-04-27

还尝试更新到 3.1.0 -> 问题仍然存在

frankpapenmeier picture frankpapenmeier 于 2017-04-27

为了记录 - 尝试过 3.1.1 - 仍然是一个问题。

philrob picture philrob 于 2017-05-01
👎7

我也试过 3.1.1 - 仍然是一个问题。

marcionitao picture marcionitao 于 2017-05-03
👎2 😕1 👍1

这是一个老问题 - 自 RC4 以来存在 - 所有信息都可以在 #9660 中找到

agrt56 picture agrt56 于 2017-05-03
😕2 👍2

@jgw96您可以在此处使用 Ionic 3.1.1 轻松重现https://github.com/shprink/ionic-withwebworker-vs-withoutwebworker

shprink picture shprink 于 2017-05-04

为了记录，我有一个组件，我想在它使用画布时使用类似的功能。 :)
有人可以为延迟加载制作一个通用的“离子画布”组件吗？:)

ghost picture ghost 于 2017-05-08

有同样的问题：/

AdnanCukur picture AdnanCukur 于 2017-06-02
👍8 👎1

有同样的问题:)

javico2609 picture javico2609 于 2017-06-02
👍7 👎1

你好，我遇到了同样的问题，在我的情况下......第一张图像没有显示......然后如果我向下滚动到底部图像开始出现但只有底部的图像......向上滚动不会使拳头图像出现...

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

germanurrus picture germanurrus 于 2017-06-04
👍3

我发现了这个错误。 在此评论https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 中，有两种可能的解决方法。

DavidWiesner picture DavidWiesner 于 2017-06-06

我也得到了这个，如解释here。 这个plunk也说明了这个问题。

pjc2007 picture pjc2007 于 2017-07-06

同样在这里。 还是有问题

$ 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
lordgreg picture lordgreg 于 2017-07-18
👎1

我看到了这个问题，但用这个临时风格的 hack 修复了它：

   <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%;
    }

不是说这是解决方案，而是让问题消失。

glebinsky picture glebinsky 于 2017-07-28
👎1

还是没定。 此处和另一个问题中建议的解决方法均未正常工作。 当无法选择无限滚动作为替代时，我们应该如何平滑滚动数百个小缩略图的列表？ 这是移动设备上的一个非常基本的用例...

bubbleguuum picture bubbleguuum 于 2017-08-03
👍4

您可以使用独立的 ng-lazyload-image。 在我看来工作，只是我需要验证一些加载时间，对我来说有点重。 （也许是因为一些不同的原因，我已经解决了 - 画布不应该去离子滚动，因为它非常不稳定）

由于我有严格的项目时间表，我可能会在稍后查看这个烦人的错误。
我意识到这没什么大不了的。 我刚刚做了一些离子原生修复。

如果您热衷于学习，您 (bubbleguuum) 也可以调试它。 这可能没什么大不了的，只是没有人看过它。 （我认为正在进行一些重新设计，但临时错误修复应该已经发布）我是一名独立开发人员，所以如果你修复它，我会很高兴，我不需要。:)

无论如何 Angular 需要有意义的错误消息，大部分的痛苦都来自那里。
跟踪跟踪不显示您的应用程序的调用者，只是从更深层次的某种 webpack/promise 错误。

ghost picture ghost 于 2017-08-04

令人难以置信的是，这行不通。 @bubbleguuum击中了它的头。

selected-pixel-jameson picture selected-pixel-jameson 于 2017-08-21
👍4

这是绝对不能接受的。 几乎每个应用程序都需要有问题的功能，但这些功能不起作用。 此外，2016 年 12 月存在的问题 #9660 仍未解决，这令人不安... :(

bisak picture bisak 于 2017-09-11
👍8

我也有同样的问题。 我使用 json 获取数据并使用 *ngFor 在前端显示数据。 但是，由于某些原因，ion-img 中的 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>

但结果是这样的

ionic

shahid27125 picture shahid27125 于 2017-09-14

我也和楼上的那个人有同样的问题。
这是代码
code

这是输出

console

tonineXtalliya picture tonineXtalliya 于 2017-09-25

不久前我遇到了类似的问题。 我通过使用地图数组函数更改图像 URL 解决了我的问题。 所以你需要类似的东西：-

并在 .ts 文件中

this.pizzaList = this.pizzaList.map((披萨)=>{
比萨饼.imgUrl = "./assets/" + 比萨饼.imgUrl + ".jpg";
返回比萨饼
});

terrycollinson picture terrycollinson 于 2017-09-25

我在调用服务时使用 map 函数：
服务
services

.ts 文件
code

tonineXtalliya picture tonineXtalliya 于 2017-09-26

我在 *ngfor 中也遇到了同样的问题。 我要切换到在等待解决方案时！！

karimessouabni picture karimessouabni 于 2017-10-07
😕1

它不起作用，有什么解决方法？！？

fdambrosio picture fdambrosio 于 2017-10-11

@karimessouabni我有关于这个问题的解决方案。 我们可以直接使用 img 标签来避免空白图像。
<img src="{{product.img}}">

shahid27125 picture shahid27125 于 2017-10-16
👎6 👍1

@shahid27125这不是解决方案，因为所有图像都会立即加载。 如果这样做，拥有包含 100 多个带有图像的项目的列表将消耗性能和移动数据。

lordgreg picture lordgreg 于 2017-10-17

@fdambrosio在此评论中https://github.com/ionic-team/ionic/issues/9660#issuecomment -304840427 是两种可能的解决方法。

DavidWiesner picture DavidWiesner 于 2017-10-18
👍1

谢谢@DavidWiesner

fdambrosio picture fdambrosio 于 2017-10-20

另一位沮丧的开发人员插话……说真的，伙计们，解决这个废话。

tomcatmwi picture tomcatmwi 于 2017-11-15
👍7 😕1

我同意@tomcatmwi

fdambrosio picture fdambrosio 于 2017-11-16

有解决这个问题的计划吗？

pjoriginal picture pjoriginal 于 2017-12-08
👍2

哇，真不敢相信人们已经等了多久了......现在也在等待修复。

capcom-r picture capcom-r 于 2017-12-12
👍2

对于只关心图像加载的每个人，您可以查看 ng2-lazyload-image 模块。 https://www.npmjs.com/package/ng2-lazyload-image

我在生产中使用了数千行，它似乎运行良好。

selected-pixel-jameson picture selected-pixel-jameson 于 2017-12-12

嗯，这并不完全正确：

  1. 首先，您必须更新您的组件（也就是说，如果您的项目实际上是自定义组件）
  2. 然后每个组件都需要自己对离子含量的引用
  3. 当然前几张图片不会加载然后直到你滚动
  4. 在哪种状态下，您开始考虑删除您也在使用的虚拟列表
  6. git checkout .
  7. 开始希望离子团队@adamdbradley注意到这个问题自 2017 年初以来一直没有解决。
  8. 等待修复。
lordgreg picture lordgreg 于 2017-12-12
👍9

还是一样的bug。。

TuNi54 picture TuNi54 于 2018-03-02
👍4

在这里

dmolinae picture dmolinae 于 2018-03-16
😕1

是的还是个bug。
我在等待修复。 与此同时，我将使用这个： https :

如果有最好的解决方案，请随时告诉我:)

TheAngularGuy picture TheAngularGuy 于 2018-03-23
👍3

将<ion-img [src]="url"></ion-img>更改<img [src]="url">对我有用

dm-grinko picture dm-grinko 于 2018-04-03

也有这个问题。 @dm-grinko 使用 img 不支持延迟加载，如果您有很多图像，这很重要。

danroot picture danroot 于 2018-04-11
👍1

我在数组中有图像，我现在从服务器下载了它，我想在其中显示它并使用虚拟滚动但图像未呈现仅显示 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 picture husainsr 于 2018-06-21

@husainsr将 ion-img 更改为 img
离子 img 不起作用

fdambrosio picture fdambrosio 于 2018-06-22

<img>在 virtualscroll 中也不起作用，因为我有一个数组，其中图像值存储在 base64 字符串中。

husainsr picture husainsr 于 2018-06-22

难以置信……我想我会很快让我的整个团队和项目都使用 React Native。
令人震惊的是，这个错误仍未修复。
与其在 Ionic 4 上工作，不如确保一流的交付质量。

mopi1402 picture mopi1402 于 2018-07-01
👍15 ❤1

任何工作围绕家伙？

kevinpallado picture kevinpallado 于 2018-11-13
😕2

任何解决方案@ionic Team？？？

Avishaidev picture Avishaidev 于 2018-11-22

老实说 ionic 团队有很好的独立项目，比如电容器，当我决定创建自己的框架时，这很有用。 新的离子虚拟滚动功能明智没有改变，只是转换为模板（web 组件，加速，不支持每个人，safari hws 问题），所以不要等待 v4 太久。 这个虚拟滚动实现是非常基本的。 （屏幕方向改变bug，可变项目，延迟加载问题，太死板，尝试解决问题，浏览器做什么） 2016年，当我对Angular一无所知的时候，虽然我在这个行业已经有几十年的时间了制作框架具有挑战性。 我的直觉是开源项目应该在 3 个周期之后发布，当基本概念到位时。 角度也是如此。 创建这样一个灵活的虚拟卷轴，即使在材料中也不存在，这不是一件容易的事。花了我一个月的时间，虽然我有一个与后端高度集成的框架。 （我不确定，什么时候准备好，现在已经一年了）所以现在离子概念有点不稳定，无论如何你可以使用带有反应的离子 v4。 所有 JavaScript 框架都不能满足您从本机应用程序中看到的需求。 如果确实存在就好了，但是如果存在错误，不幸的是，您还需要了解 swift、android 和其他东西。 C++。 即使我此时不使用 Web 组件，我也能够制作一些果汁，所以速度很好，混合应用程序将成为常态，至少因为 pwa 毫无疑问，但它需要更多的技能，比如果你只是去原生。 （有人需要开发两次）没有真正可靠的开源插件。

ghost picture ghost 于 2018-11-22
👍1

目前我的团队不再使用离子，因为这些。 极好的 ！！！

javico2609 picture javico2609 于 2018-11-22

此问题已自动识别为 Ionic 3 问题。 我们最近将 Ionic 3 移到了它自己的存储库。 我正在将此问题移至 Ionic 3 的存储库。请在那里跟踪此问题。

如果我犯了一个错误，如果这个问题仍然与 Ionic 4 相关，请让 Ionic Framework 团队知道！

感谢您使用 Ionic！

ionitron-bot[bot] picture ionitron-bot[bot] 于 2018-11-28

问题移至： https :

ionitron-bot[bot] picture ionitron-bot[bot] 于 2018-11-28
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

giammaleoni picture giammaleoni  ·  3评论
Nick-The-Uncharted picture Nick-The-Uncharted  ·  3评论
Macstyg picture Macstyg  ·  3评论
manucorporat picture manucorporat  ·  3评论
gio82 picture gio82  ·  3评论