@error 事件配合手动赋值 src 是最可靠方案,因其能兜底多端兼容;@error 仅通知失败,需手动设 this.src = this.placeholderUrl 才能切换占位图,且 placeholder 必须为本地小体积静态路径并设明确宽高。

直接用 @error 事件手动切换 src 是最可靠、多端兼容的方案,其他方式(比如仅靠 v-if 或第三方插件)要么不兜底、要么引入额外风险。
为什么 @error 必须配合手动赋值
@error 只是通知“加载失败”,它不会自动改 src,也不会清空原错误地址。如果不手动执行 this.src = this.placeholderUrl,页面就一直卡在空白或裂图状态。
- 错误写法:
@error="handleError"里只做日志打印或弹窗,没动src - 正确做法:在事件回调中立即重赋值,且必须用本地静态路径,如
/static/placeholder.png - 注意:不能在
@error里反复重试原src(比如再赋一次网络地址),否则可能触发无限循环
placeholder 属性和 @error 不是二选一,而是分工协作
placeholder 负责“加载中”阶段,@error 负责“加载失败”阶段——两者缺一不可。只用 placeholder 会漏掉 404、断网、路径写错等真实失败场景。
-
placeholder必须是本地路径(/static/xxx.png),网络地址在微信小程序里大概率被忽略 -
placeholder文件本身要小(建议 ≤5KB),否则它自己加载慢,反而放大空白时间 - 别把
image包在v-if="src"里,否则placeholder根本没机会渲染
真机测试时,@error 容易被忽略的触发条件
模拟器常不触发 @error,尤其在 H5 环境下;只有真机断网或服务端明确返回 404 时,才能稳定复现并验证逻辑是否生效。
- 测试前先关掉 WiFi / 移动数据,再刷新页面
- 确保后端接口返回的图片 URL 确实不可访问(比如故意拼错路径)
- 占位图也要有明确宽高,否则它加载时自身也会引起容器二次重排
最容易被跳过的其实是占位图自身的尺寸控制——哪怕 placeholder 和 @error 都写对了,如果占位图没设宽高,或者宽高比和目标图不一致,依然会闪、会留白、会错位。


















