原生导航栏不支持显示真实用户头像；其leftIcon仅支持字体图标或极小base64（微信小程序不支持），若需动态头像必须使用custom导航栏并手动实现布局与交互。
uni-app 原生导航栏（即 navigationStyle: "default"）不支持直接在左侧插入头像——它只允许配置文字、图标（leftIcon）、返回按钮逻辑，且图标必须是字体图标或系统内置 icon，无法渲染 <image> 或动态 URL 头像。
原生导航栏的 leftIcon 只能用字体图标或 base64
如果你看到某些项目“原生导航栏左侧有头像”，实际是以下两种情况之一：
- 误把自定义导航栏（
navigationStyle: "custom"）当成原生导航栏； - 用字体图标（如 iconfont）把头像“画”进字体文件，再通过
leftIcon指向该 Unicode 字符（例如"\ue601"），但这是静态贴图，无法加载用户真实头像。
pages.json 中合法的 leftIcon 配置仅接受：
"leftIcon": "\ue601", // 字体图标 Unicode "leftIcon": "data:image/png;base64,iVBORw..." // 极小尺寸 base64（iOS/Android 支持有限，微信小程序不支持）
微信小程序平台明确不支持 base64 或网络图片作为 leftIcon，会静默忽略；APP 端（5+）虽部分支持 base64，但尺寸稍大就渲染失败或模糊。
想显示真实用户头像？必须用 custom 导航栏
真正可行的方案是放弃原生导航栏，改用 navigationStyle: "custom"，然后自己写一个顶部 <view> 区域，并在里面放 <image :src="userAvatar">。
关键点：
- 在
pages.json对应页面中设置"navigationStyle": "custom"； - 用
uni.getSystemInfoSync().statusBarHeight+uni.getMenuButtonBoundingClientRect()计算出安全高度，避免头像被状态栏或胶囊遮挡； - 左侧头像区域需手动对齐胶囊按钮上沿（不能只靠 flex-center）；
- 头像点击事件要自己绑定，例如
@click="toProfile"，原生返回逻辑（uni.navigateBack）也要手写。
为什么不能混用：原生导航栏 + 自定义头像
原生导航栏由微信/系统 WebView 原生渲染，DOM 层不可访问，你无法用 Vue 模板往里面 inject 任何节点。所有试图通过 CSS 定位覆盖、z-index 叠加 image 的做法，在真机上都会：
- 被原生导航栏裁剪（iOS 尤其严格）；
- 在横屏/刘海屏/折叠屏下完全错位；
- 微信开发者工具里看似正常，真机调试立即失效。
这不是兼容性 bug，而是平台限制——原生导航栏和 webview 内容属于不同渲染层。
真实头像意味着动态数据、网络请求、缓存逻辑、错误 fallback，这些都只能发生在 custom 导航栏的 Vue 实例上下文中。别在原生导航栏上浪费时间尝试 hack。
