图片“闪一下”是因为加载前image高度为0导致布局跳变。解决方法：设固定高度或aspect-ratio；用@load+v-if控制显隐；避免数据重置引发重复加载。
为什么列表里的图片会“闪一下”才显示？
根本原因是图片加载完成前，<image></image> 默认渲染区域高度为 0 或由内容撑开，导致 DOM 高度跳变，触发重排重绘。尤其在列表中，每个 <image></image> 加载时机不一致，就表现为整行“抖动”或“闪白”。这不是 bug，而是 Webview 渲染机制的自然表现——但用户感知就是体验差。
常见错误现象包括：
- 滚动时图片突然“弹出”，列表项上下跳动
- 下拉刷新后，已加载过的图片再次闪烁
- 使用
v-for渲染的图片，在数据更新后重复触发加载动画
给 <image></image> 设固定高度或 aspect-ratio 是最简单有效的解法
只要容器有可预测的高度，浏览器就能预留空间，避免布局抖动。这是成本最低、兼容性最好的方案。
实操建议：
- 在
uni.scss或全局样式中统一设置：image { height: 200rpx; /* 或用 aspect-ratio: 16/9 */ } - 若图片宽高不固定，改用 CSS 容器包裹 +
aspect-ratio（注意：H5 和小程序基础库 ≥ 2.25.0 支持，App 端需app-plus编译模式启用） - 避免只写
width: 100%而不设高度，这等于把布局权交给未加载的图片
@load 事件配合 v-if 控制显隐，适合需要“加载完成才出现”的场景
当设计要求图片必须“淡入”或不能占位时，@load 是唯一可靠的加载完成钩子。但注意它只在图片真正加载成功时触发，失败不会调用。
实操建议：
- 用一个响应式变量标记是否加载完成，例如：
<image :src="item.avatar" true v-if="item.loaded"></image>
- 不要用
v-show替代v-if，否则仍会参与初始渲染，无法规避闪动 - 搭配骨架屏更稳妥：加载中显示灰色占位块，
@load后切换为真实图片 - 慎用于长列表——频繁触发
@load可能造成性能压力，建议加防抖或节流（如仅对可视区图片监听）
列表中图片闪烁还可能来自数据重置，不是图片本身的问题
很多开发者排查半天图片属性，最后发现是 onShow 或 onPullDownRefresh 里无条件重置了整个列表数据，导致所有 <image></image> 被强制重新加载。
典型误操作：
- 在
onShow中调用this.list = []再请求，哪怕数据没变 - 使用
Object.assign(this.$data, initialState)清空状态，连带清掉了loaded标记 - 分页场景下，下拉刷新时未保留原有数据，而是直接
this.list = res.data
真正该做的是：只更新变化的部分，用 key 或 track-by 告诉 Vue 复用已有节点；图片加载状态应随数据项持久化，而不是每次渲染都从头开始。
