图片加载“闪一下”是因渲染层先绘制高度为0的空盒子，待图片加载后才撑开布局；微信小程序双线程架构加剧该问题。解决方案：使用本地 placeholder + 固定宽高（rpx）、配合 @error 处理失败、启用 lazy-load 和 intersectionobserver 实现懒加载，并确保占位图与目标图宽高比一致。
为什么图片一加载就“闪一下”
根本不是图片本身出问题，而是渲染层先画了个空盒子（高度为 0），等图进来才撑开布局，视觉上就是“跳”或“闪”。微信小程序双线程架构会让这个延迟更明显，尤其在列表滚动、tab 切换时，忽隐忽现特别扎眼。
用 placeholder + 固定尺寸最稳
placeholder 是 uni-app 原生支持的属性，但它只在「图开始加载但还没出来」时生效，且必须配合固定宽高才能真正防抖动。
-
placeholder值必须是本地路径，比如'/static/placeholder.png'；网络地址在小程序里大概率不显示 - 务必给
<image></image>同时设置width和height（单位推荐rpx），只设width不设height依然会塌陷 - 占位图文件要真实存在
static/目录下，大小建议 ≤5KB，否则它自己加载慢，占位就失效 - 别把
<image></image>包在v-if="url"里——这样placeholder根本没机会渲染
示例写法：
<image :src="url" :placeholder="'/static/placeholder.png'" mode="aspectFill" style="width: 200rpx; height: 200rpx;"></image>
@error 必须配合 placeholder 一起用
placeholder 不管加载失败，@error 只捕获失败，两者单独用都会留白。真机断网时最容易暴露这个问题。
- 不要直接改原始
imageUrl，用独立变量控制显示源，比如displayUrl -
@error触发后，手动赋值this.displayUrl = this.placeholderUrl - 避免在
@error里反复重试原src，容易触发无限循环 - 占位图自身也要有明确尺寸，否则它加载时也会导致容器二次重排
长列表场景下别只靠 placeholder
上百张图同时请求，哪怕都有占位，首屏仍可能卡顿或布局抖动。此时 lazy-load 属性和 IntersectionObserver 才是关键。
- 开启
lazy-load属性（微信基础库 ≥ 2.12.0 支持），让非可视区图片延迟加载 - 慎用
@load控制状态：每个图都触发一次，列表越长越容易性能抖动 - 可视区懒加载比全量加载更稳妥，尤其在鸿蒙或低端安卓机上
- 如果用了
v-if控制图片区块，注意别包在<scroll-view></scroll-view>上——会销毁滚动上下文，反而加重抖动
mode="aspectFit" 下会出现留白或裁剪；而所有这些配置，在真机断网环境下才能稳定验证效果。
