图片加载闪烁的根本原因是渲染层“先画空白再填图”，uni-app的image组件默认不占位，加载前高度为0或由内容撑开，导致重排布局产生视觉跳变。
图片加载闪烁的根本原因是什么
不是图片本身的问题，而是渲染层“先画空白再填图”导致的视觉跳变。uni-app 的 image 组件默认不占位、不预留空间，尤其在微信小程序和 App 端，加载前高度为 0 或由内容撑开，图片一进来就重排布局，肉眼就是“闪一下”。
常见错误现象包括：列表滚动时图片忽隐忽现、首页首屏图片加载瞬间上移、tab 切换后图片位置抖动。
- 只靠
@load控制显示时机，但没解决加载前的空白期 - 用
v-if切换图片，每次销毁重建组件，反而加重闪烁 - 没设固定宽高，或只设了
width没设height，浏览器无法预估容器尺寸
最简单有效的占位方案：用 placeholder 属性 + 固定尺寸
uni-app 3.1+ 已原生支持 placeholder 属性，它会在 src 加载完成前显示指定图片，且不触发重绘 —— 关键是它和真实图片共用同一个 DOM 节点。
实操建议：
-
placeholder值必须是本地路径（如/static/placeholder.png），网络地址在部分平台（尤其是小程序）可能不生效 - 务必给
image设置明确的width和height（rpx 或 px），避免布局抖动 - 占位图尺寸建议与目标图宽高比一致，否则
mode="aspectFit"下可能出现留白或裁剪
示例：
<image :src="url" placeholder="/static/placeholder.png" mode="aspectFit" style="width: 200rpx; height: 150rpx;"></image>
加载失败也要兜底：结合 @error 动态 fallback
placeholder 只管“加载中”，不管“加载失败”。当网络异常、CDN 返回 404 或路径写错时，image 会留白或显示默认缺失图标 —— 这也是闪烁/错位的常见来源。
正确做法是监听 @error，把 src 替换成占位图路径：
- 不要直接修改原始
imageUrl变量，否则影响后续重试逻辑；推荐用计算属性或独立displayUrl控制显示源 - 避免在
@error里重复调用this.$set或触发响应式更新过多，简单赋值即可 - 如果业务允许，可加个简单重试机制（如 1 次），但别无限循环
示例关键片段：
data() { return { displayUrl: this.imageUrl, placeholderUrl: '/static/placeholder.png' } },<br>methods: { onImageError() { this.displayUrl = this.placeholderUrl } }
进阶控制：懒加载 + 渐显动画防突兀
长列表场景下，光有占位还不够。图片批量进入视口时，若同时请求并渲染，仍可能卡顿或闪烁。需要配合 lazy-load 和 CSS 过渡。
注意点：
-
lazy-load在 H5 和 App 端有效，但微信小程序需基础库 ≥ 2.12.0，且仅对scroll-view内部生效 - 渐显要用
opacity+transition，不能用display: none，否则破坏懒加载行为 - 慎用
will-change: opacity，低端安卓机可能引发渲染异常
示例样式：
.fade-image { opacity: 0; transition: opacity 0.2s ease-in; }<br>.fade-image.loaded { opacity: 1; }，配合 @load 添加 loaded class。
最容易被忽略的一点：所有占位图必须放在 static 目录，且体积控制在 2KB 以内 —— 大图反而拖慢首屏，让“占位”变成“添堵”。
