等高的图片底下出了一块空隙

[wmhh1129]

复现地址：https://test-h5.aomiapp.com/uat/activity-v2/marketing/discover.html#/home
点击切换到“视频vlog”这个分类，可以复现。

据目前观察，有部分的浏览器上是正常的，部分能复现问题。
能复现问题的chrome版本：版本 124.0.6367.119（正式版本） (x86_64)

可以发现我的img src后面是加了一串?x-oss-process=style/HomePage-ProtocolView来让访问体积压缩，这个是阿里云oss的策略，有可能是被这个影响到了？

[gk-shi]

不使用缓存的话这边就没问题，能单独提出这个 视频 vlog 页的代码放到 code sandbox 上给看看嘛，不调试一下暂时看不出问题所在。

[wmhh1129]

不知道为何，在sandbox写了极简demo后，并不能编译成功。
sandbox地址：https://codesandbox.io/p/devbox/mg-qywrgh?file=%2Fsrc%2FApp.vue

具体的逻辑如sandbox所示，模拟了一下

复现图片地址：https://aomiapp-discovery-test.oss-cn-shenzhen.aliyuncs.com/306c6e81-6f35-47ff-b111-8e78a53008b4.png?x-oss-process=style/HomePage-ProtocolView

复现步骤：
1、两列的顶部图片都是这两张图，且有个细节是，其实图片的原本链接为https://aomiapp-discovery-test.oss-cn-shenzhen.aliyuncs.com/306c6e81-6f35-47ff-b111-8e78a53008b4.png，在接口获取完毕后，给图片加上了?x-oss-process=style/HomePage-ProtocolView，这样是为了加载图片的时候，体积变小，获取高度速度也会变快，本地测试过如果不添加?x-oss-process=style/HomePage-ProtocolView，那么行为就是正常的，作者方便本地调试一下吗

[gk-shi]

你把v2-waterfall更新到2.0.0-beta，然后把这里少的https的前缀补齐，应该就能编译过了。但这个例子我看展示也是正常的......

ps: 但你这个例子帮我找到了另外一个 Bug，你这段代码本来应该展示 4 个图片，但实际展示了 8 个，通过你这段代码我找到了一个问题并准备修复掉了~

[gk-shi]

另外这个样式文件会产生一些影响，需要注释掉

[wmhh1129]

改了那个https跟升级成2.0，确实可以打开，但却复现不了问题，可是Disable cache就正常的话，感觉还是跟代码有关系的？于是我想把我代码里的v3-waterfall也升级成2.0试试，但是我看migration里面的break change只有一个废弃了srcKey，在img上绑上data-key，别的好像都依然照旧，但是我升级完就渲染不出来图片了..是还有什么隐藏的机关在migration里没提到吗
原使用代码截图：

[wmhh1129]

似乎观察到了一个现象，就是两张相同的图片，其实只加载了一次，是否会影响你的判断。

[gk-shi]

改了那个https跟升级成2.0，确实可以打开，但却复现不了问题，可是Disable cache就正常的话，感觉还是跟代码有关系的？于是我想把我代码里的v3-waterfall也升级成2.0试试，但是我看migration里面的break change只有一个废弃了srcKey，在img上绑上data-key，别的好像都依然照旧，但是我升级完就渲染不出来图片了..是还有什么隐藏的机关在migration里没提到吗 原使用代码截图：

没有其他的隐藏变化诶，我自己也有一个从使用1.3.2升级到现在最新的版本的项目使用，除了迁移文档中提到的几个字段其他都没动，甚至data-key都只有在图片加载失败时才会生效，下图中是我自己项目升级时的改动：

[wmhh1129]

1、我把我圖片裡面的loading="lazy"去掉，圖片就可以渲染出來了。（原生屬性loading="lazy"，你在你的頁面加上看看能否復現）
2、但是只渲染了一列。即便我把寬度改成150，也只有一列。
3、我試了一下，單拎出來是可以的，放在vant-tab底下就會只有一列，而且切換tab的時候，數據不會重新渲染

[gk-shi]

1、我把我圖片裡面的loading="lazy"去掉，圖片就可以渲染出來了。（原生屬性loading="lazy"，你在你的頁面加上看看能否復現） 2、但是只渲染了一列。即便我把寬度改成150，也只有一列。 3、我試了一下，單拎出來是可以的，放在vant-tab底下就會只有一列，而且切換tab的時候，數據不會重新渲染

更新了一版2.0.0-beta.5，我已经在 code sandbox 结合 van-tabs 写了一版，可以看看：https://codesandbox.io/p/devbox/v3-waterfall-van-tabs-24h8f5?file=%2Fsrc%2FApp.vue%3A69%2C33

1.组件 本身就有虚拟列表了，并且需要渲染图片进行高度计算，所以不需要使用 loading="lazy"了
2 & 3：造成这个的原因是都是使用van-tabs的时候，部分钩子的机制没触发到(比如它第一次读到它的width是0，所以就渲染成了一列)