uni-app image 组件动态绑定 src 不显示的最常见原因是路径未正确初始化或格式不合法，需确保使用 /static/ 开头的绝对路径或合法网络 url，初始化 data 中的 src 变量，并为远程图片添加防缓存参数。
uni-app image 组件动态绑定 src 时图片不显示
最常见原因是路径未正确初始化或格式不合法。uni-app 的 image 不支持 Vue 模板中直接拼接字符串路径（如 "'/static/' + name + '.png'"），也不识别 @/ 别名（尤其在非 H5 平台）。它只认两种路径：
- 以
/static/开头的绝对路径（必须从项目根目录起，/static/logo.png✅） - 合法的网络 URL（
https://xxx.com/a.jpg✅） -
require()只在 H5 有效，小程序和 App 端会报错或静默失败 - 相对路径（如
../images/a.png）在非 H5 平台基本不可靠，慎用
动态切换 src 时图片没更新（缓存导致）
远程图片（尤其是 CDN 或后端接口返回的）常因浏览器或小程序缓存不刷新。单纯赋值 this.imgSrc = newUrl 不一定触发重载。
- 强制刷新：在 URL 后加时间戳或随机参数，例如
this.imgSrc = 'https://api.example.com/photo.jpg?t=' + Date.now() - 避免重复请求：如果频繁切换，可加防抖或记录上一次时间戳，防止 t 参数相同
- 本地 static 图片不受此影响，但路径错误仍会“不显示”而非“不刷新”
data 中未初始化 src 导致报 undefined
模板里写 <image :src="userAvatar"></image>，但 data() 里没声明 userAvatar，首次渲染就会报 Failed to load local image resource undefined。
- 必须在
data中显式初始化：userAvatar: ''或userAvatar: '/static/default-avatar.png' - 若数据来自异步（如 API 请求），建议先设默认占位图，再覆盖
- 不要依赖
v-if延迟渲染来规避——它不能解决响应式缺失问题
需要根据条件切换多张图，但路径是变量怎么办
比如轮播图、用户上传预览、状态图标等场景，路径由数组索引或状态决定。
- 把所有可能用到的 static 路径提前写死在数组里：
iconList: ['/static/icon-ok.png', '/static/icon-error.png', '/static/icon-pending.png'] - 用索引取：
:src="iconList[statusIndex]"，比字符串拼接更安全 - 若路径来自后端（如用户头像 URL），确保字段存在且非空；可用
v-if="avatarUrl"配合默认图兜底 - 小程序平台对
src类型校验严格，null、undefined、空字符串都会触发警告甚至白屏
真正麻烦的不是“怎么换”，而是“换完是否真被渲染了”。每次改 src 都要确认三件事：路径格式合法、变量已初始化、远程图带防缓存参数。漏掉任意一项，就卡在“明明代码改了却没反应”上。
