iOS图片不显示核心是三重校验:大小写敏感、编译期确定、必须真实存在;静态图须用require('@/static/xxx.png')字面量引入,禁动态拼接;网络图需HTTPS+≤20KB+预加载;真机必用uni.getImageInfo验证。
uni-app 图片在 ios 上不显示,核心不是“路径写错了”,而是 ios 对资源路径做了三重校验:大小写敏感、必须编译期确定、必须真实存在。h5 或安卓能跑通的写法,在 ios 真机上大概率静默失败。
静态图片必须用 require() 引入,不能拼接字符串
iOS 原生不允许运行时动态生成本地路径,src="/static/" + name + ".png" 这种写法会被直接忽略,控制台无报错、图片留白。
- ✅ 正确:在 JS 中写
logoUrl: require('@/static/images/logo.png')(注意是字面量字符串,不能含变量) - ❌ 错误:
imgPath: '/static/images/' + this.type + '.png'或 - ⚠️ 注意:
@/别名只在 HBuilderX 编译时生效;打包后需确认dist/build/app-plus/static/images/目录下文件确实存在、大小写完全一致
网络图片必须 HTTPS + ≤20KB + 预加载
iOS 会拦截非 HTTPS 图片,且微信分享等场景对缩略图体积极其敏感——实测超过 20KB 就大概率不显示,不是“加载慢”,是根本拒绝渲染。
- 必须用
https://协议,http://在 manifest.json 开权限也无效 - 建议用
uni.compressImage压缩后再传(注意:微信小程序端该 API 不存在,需走 canvas 路线) - 分享前务必先
uni.downloadFile下载到临时路径,再把tempFilePath传给uni.share,避免网络抖动导致 fallback 失败
真机调试必须用 uni.getImageInfo 主动验证
HBuilderX 模拟器对路径宽容度过高,很多问题在模拟器里完全看不出来。iOS 真机才是最终考场。
- 别只看页面有没有
标签,要主动调用:uni.getImageInfo({ src: '/static/test.png' }) - 成功回调里能看到宽高,说明路径通过校验;失败时明确报错如
fail: "no such file or directory",比静默空白好排查得多 - 如果返回
path字段是data:开头,说明你误用了 base64,iOS 不支持直接渲染 data URL
最容易被忽略的是:iOS 后台挂起超 30 秒再切回前台,缓存可能失效,图片加载会失败。这不是路径问题,而是生命周期管理缺失——得在 onShow 里加重试逻辑或预加载校验,不能只依赖首次 onLoad。











