Vue组件无法正常显示存储在Vuex中的已上传头像图片问题

问题根因 #

• require是webpack的编译期处理逻辑，仅会在代码打包阶段执行一次，运行时不会随变量变更自动重新执行
• 你当前的Vuex存储逻辑不一致：默认头像的state.photo存的是require执行后返回的打包后路径，上传新头像后state.photo存的是新文件名，二者格式不统一，直接绑定到src属性无法正常识别
• 写在data中的代码仅会在组件初始化时执行一次，后续state.photo更新不会触发重新计算，因此写在data中的require逻辑无效

修复方案 #

方案1：头像资源经过webpack打包的场景 #

1. 调整Vuex存储逻辑，统一存储文件名，不存储require执行结果

// Vuex Store 代码
state: {
  photo: 'default.jpg'
},

2. 组件内使用计算属性动态生成路径，计算属性会自动监听依赖变化触发更新

// 组件js代码
computed: {
  userPhoto() {
    return require(`../backend/public/users/${this.$store.state.photo}`)
  }
}

3. 模板绑定计算属性

<!-- 组件模板代码 -->
<v-avatar size="70" class="mb-2">
  <img :src="userPhoto" :alt="$store.state.name" />
</v-avatar>

方案2：上传头像存储在后端静态资源目录、不经过webpack打包的场景 #

如果新上传的头像不会经过webpack编译打包，直接由后端提供静态资源访问，不需要用require，直接拼接服务端静态资源路径即可：

// 组件js代码
computed: {
  userPhoto() {
    // 路径替换为你实际的后端静态资源访问前缀
    return `/users/${this.$store.state.photo}`
  }
}

模板绑定逻辑和方案1一致。

内容的提问来源于stack exchange，提问作者Ksharples431