微信小程序图片加载失败主因是体积超5MB或安卓返回webp格式不兼容；uni.compressImage在微信端未实现，需用canvas+toTempFilePath或jpeg-js压缩，并动态设质量参数，上传前须校验体积、路径和格式。
图片在微信小程序里加载失败、显示空白、控制台报“渲染层网络层错误”或上传时被后端拒收，大概率不是路径写错，而是体积超限或格式不兼容——5MB 限制和安卓返回 webp 是两个最常被忽略的硬门槛。
为什么 uni.compressImage 在微信小程序里会报 undefined
因为这个 API 根本没在微信小程序端实现。uni-app 文档里写的“跨端统一”在这里不成立；它底层依赖的是微信自己的 wx.compressImage，而该接口从 2024 年起已被官方标记为「即将废弃」，且不支持质量参数控制。你写了 uni.compressImage，运行时就是 undefined is not a function。
真正能用的压缩路径只有两条：
- 用
canvas+toTempFilePath手动缩放绘制（注意：必须用toTempFilePath，不能用toDataURL，否则uni.uploadFile会报错） - 引入轻量库如
jpeg-js（体积务必压到 100KB 以内，否则影响首屏）
canvas 压缩时质量参数不能写死
canvas.toDataURL("image/jpeg", 0.8) 这个 0.8 对大图（比如原图 4MB）毫无意义——压缩后可能还是超 5MB；对小图（200KB）又容易画质发灰。PNG 格式则完全忽略第二个参数，强制转 JPEG 还会丢透明通道。
实操建议按原始体积动态设参：
- 原始体积 > 2MB → 质量设为
0.6，目标宽度设为1200 - 500KB ~ 2MB → 质量
0.75，目标宽度1080 - 先调用
uni.getImageInfo拿到size字段，再决定压缩策略
上传前必须校验压缩结果，而不是只看“成功回调”
常见错误是 canvas 绘制完就立刻 uni.uploadFile，结果服务端返回 "invalid image format" 或 "file too large"。真正该检查的三项是：
- 用
uni.getFileInfo查压缩后文件体积是否仍 > 5MB - 确认
filePath是本地临时路径（不能以http://或data:开头） - 用
uni.getImageInfo的path后缀判断是否被安卓真机意外转成.webp（后端若只认.jpg或.png，就会静默失败）
图片加载白屏的本质不是“没图”，而是“没反馈”
用户看到白屏，往往是因为图片体积大、解码慢、渲染阻塞，但前端没做任何过渡处理。与其等它加载完，不如提前给感知：
- 用
@load和@error事件配合v-if切换占位图、骨架屏、错误提示 - 避免用
widthFix/heightFix模式——图片加载后尺寸突变会触发重排，导致页面抖动甚至卡顿 - 关键图片（如 banner、头图）可用
uni.preloadPage提前拉取，但仅对模板中写死的路径有效；动态 URL 得靠uni.createImage()手动预加载
最易被忽略的一点：iOS 内存紧张时会直接回收 WebView，大图+长列表极易触发白屏甚至闪退——压缩不只是为了上传合规，更是为了保命。
