ios图片显示需三重校验:大小写敏感、编译期确定、真实存在;必须用require('@/static/xxx.png')字面量,禁变量拼接;网络图须https且≤20kb;真机调试必用uni.getimageinfo验证。

iOS端图片显示不出来,不是路径写错那么简单,而是iOS对资源路径执行了三重硬校验:大小写敏感、必须编译期确定、必须真实存在。H5或安卓能跑通的写法,在iOS真机上大概率静默失败——不报错、不留提示、只留白。
require('@/static/xxx.png') 是静态图唯一安全写法
iOS原生不允许运行时拼接本地路径,src="/static/" + name + ".png" 或 <image :src="'/static/' + filename"></image> 这类写法会被直接忽略。
- ✅ 必须用
require(),且参数必须是字面量字符串,比如logoUrl: require('@/static/images/logo.png') - ❌ 不能含变量、不能有表达式、不能用模板字符串
- ⚠️
@/别名只在 HBuilderX 编译时生效;打包后请检查dist/build/app-plus/static/images/目录下文件是否真实存在、大小写是否完全一致(Logo.png≠logo.png)
网络图必须 HTTPS + ≤20KB + 预加载
iOS系统级拦截非HTTPS图片,哪怕 manifest.json 开了网络权限也无效;微信分享等场景还会额外拒绝超过20KB的缩略图——不是加载慢,是根本拒渲染。
- ✅ 强制用
https://协议,http://直接失效 - ✅ 图片体积建议压到20KB以内,可用
uni.compressImage处理(注意:微信小程序端该API不可用) - ✅ 分享前务必先
uni.downloadFile下载到临时路径,再把tempFilePath传给uni.share,避免网络抖动导致 fallback 失败
真机调试必须用 uni.getImageInfo 主动验证
HBuilderX 模拟器对路径过于宽容,很多问题在模拟器里完全看不出来。iOS真机才是最终考场。
- ✅ 调用
uni.getImageInfo({ src: '/static/test.png' }),成功回调能拿到宽高,失败会明确报错(如fail: "no such file or directory") - ⚠️ iOS 后台挂起超30秒再切回前台,缓存可能失效,图片加载会失败——这不是路径问题,而是生命周期管理缺失;得在
onShow里加重试逻辑或预加载校验,不能只依赖首次onLoad
路径含中文/空格/括号?真机会静默截断
小程序和iOS平台都要求路径是合法 URI,但 uni-app 不会对动态拼接的 URL 自动编码。遇到中文、空格、&、#、括号等字符,真机会直接丢弃参数后半段,控制台只显示 Image load failed 或无任何提示。
- ✅ 静态资源路径必须用英文/数字/下划线命名,且用根相对路径,如
/static/logo.png - ✅ 动态 URL 必须整串
encodeURIComponent(注意:只 encode 参数值不够,要 encode 整个 query string) - ⚠️ 更稳妥做法是服务端返回已编码路径,或前端拼接前单独 encode query 部分再组装——因为
encodeURIComponent会编码/和:,整 URL 编码易出错
最常被忽略的点是:iOS真机不会告诉你路径错在哪,它只会沉默留白。别猜,直接用 uni.getImageInfo 查;别信模拟器,只信真机;别拼路径,只用 require 字面量。











