uni-app中image的placeholder属性需用本地静态路径（如/static/placeholder.png），配合固定容器宽高，才能有效实现加载中占位并防止闪烁；它不处理加载失败，需结合@error事件手动切换占位图。
直接用 image 的 placeholder 属性 + 固定容器尺寸，就能同时解决占位和闪烁两个问题。其他方案要么漏掉加载中状态，要么在小程序里触发重绘，反而更不稳。
uni-app image 的 placeholder 属性怎么用才有效
placeholder 是 uni-app 原生支持的占位图属性，但它只在「图片开始加载但尚未完成」时生效，不处理加载失败场景。
- 路径必须是本地静态资源（如
/static/placeholder.png），网络地址在部分平台（尤其是微信小程序）可能被忽略 - 务必确保占位图文件真实存在于
static目录下，且大小控制在 5KB 以内，否则它自己加载慢，占位效果就失效 - 不能和
v-if或v-show混用——比如把image包在v-if="imageUrl"里，会导致 placeholder 根本不渲染 - 示例写法：
<image :src="url" :placeholder="'/static/placeholder.png'" mode="aspectFill"></image>
为什么图片一加载就“闪一下”
根本原因是容器高度塌陷：图片没加载完时，image 元素高度为 0，等图片进来瞬间撑开布局，视觉上就是“跳”或“闪”。这不是 bug，是浏览器默认行为。
- 最简单解法：给
image或其父容器设固定宽高，比如width: 200rpx; height: 200rpx; - 如果要响应式宽高比（比如 1:1），用 padding-bottom 技巧：
view { width: 100%; padding-bottom: 100%; position: relative; }，再把image绝对定位填满 - 别在
uni.scss里全局写image { height: auto; }——这会让所有图片都先无高度渲染，反而放大闪烁感 - 微信小程序基础库 2.25.0+ 支持
decoding="async"，但 uni-app 尚未透出该属性，暂不可用
@error 和 @load 事件该怎么配合 placeholder
@error 只捕获加载失败，@load 只通知加载成功，它们都不管“正在加载中”这个中间态。单独靠它们做占位，用户会看到 100~300ms 的空白。
- 正确做法是三者并用：
placeholder覆盖加载中，@load清除 loading 状态（如有），@error切换为失败占位图 - 注意
@error触发后，src值不会自动变，得手动赋值：this.imageUrl = this.placeholderUrl - 避免在
@error里反复重试（比如重新赋值原src），容易触发无限循环 - 真机测试时，断网环境才能稳定复现
@error，模拟器常不触发
真正容易被忽略的是：placeholder 图片本身也要有明确尺寸，否则它加载时也会导致容器二次重排。建议所有占位图统一导出为 100×100 或 200×200 像素，再通过 CSS 缩放，而不是依赖原始分辨率拉伸。
