真机图片不显示主因是路径未合法URI编码：static目录须用英文/数字/下划线命名+根相对路径；动态URL需整串encodeURIComponent或服务端预编码；downloadFile临时路径需getImageInfo校验兼容性。
uni-app 小程序端图片不显示的常见原因
真机调试时图片空白，但开发者工具里正常，大概率是路径编码问题。小程序原生要求图片路径必须是合法 URI，而 uni-app 在编译时对 static 或 uni-file-picker 等来源的路径不做自动编码，遇到中文、空格、括号、&、# 等字符就会被截断或解析失败。
常见错误现象包括：Image load failed 控制台警告、404 请求、图片区域留白无报错（静默失败）。
关键点：H5 端能跑通 ≠ 小程序端能跑通；本地开发能看 ≠ 真机扫码能看。
静态资源路径必须用相对路径 + 不含非法字符
小程序平台（微信/支付宝/字节）只支持相对路径引用 static 目录下的图片，且路径中不能出现未编码的特殊字符。
- ✅ 正确写法：
- ❌ 错误写法：
./开头） - ❌ 错误写法：
注意：static 目录下文件名建议只用英文、数字、下划线、短横线，避免任何编码风险。
动态路径必须手动 encodeURIComponent
当图片路径来自接口返回、用户上传、或拼接生成（如 url + '?t=' + Date.now()），必须对整个路径做 URI 编码，否则真机会直接丢弃参数后半段。
例如：
// ❌ 危险：参数带 & 或中文，真机下 ? 后内容全丢失
<image :src="'https://xxx.com/a.jpg?name=张三&v=1'"></image><p>// ✅ 正确：整条 URL 编码（注意：只 encode 参数值不够，要 encode 整个 query string）
const safeUrl = encodeURIComponent('<a href="https://www.php.cn/link/23e6e4229ed905e071e1d4a82bb71743">https://www.php.cn/link/23e6e4229ed905e071e1d4a82bb71743</a>')
<image :src="safeUrl"></image></p>
但更稳妥的做法是：服务端返回已编码路径，或前端拼接前先对 query 部分单独编码，再组装——因为 encodeURIComponent 对 / : 也会编码，整 URL 编码容易出错。
uni-app 的 uni.downloadFile 和临时路径要注意平台差异
真机上用 uni.downloadFile 下载图片后得到 tempFilePath，这个路径在 iOS 和 Android 表现不同：iOS 返回的是 file:/// 协议路径，Android 是 http:// 或 weixin:// 前缀，部分安卓机型（尤其旧版）不支持直接给 src。
解决方案：
- 优先用
uni.getImageInfo校验下载后的路径是否可读（避免静默失败） - 不要直接把
tempFilePath当作src绑定，先用uni.saveImageToPhotosAlbum或转 base64（小图可用）再渲染 - 微信小程序推荐走
wx.previewImage而非自行
路径编码这事，看着是小细节，但真机一测就暴露——多数人卡在“为什么开发者工具好好的”，其实只是模拟器没校验 URI 合法性而已。
