在 vue 组件中使用存储在 vuex 中的上传照片时出现问题

Question

我可以上传照片用作头像，但只能显示我的默认照片。当我尝试访问新上传的文件时，组件显示 $store.state.photo。我相信我可能需要照片，因为与 webpack 有关，但我不知道我应该在哪里做。我可以在我的 vuex 商店中做到这一点，但不能在组件中做到这一点。

查看vue开发工具时，刚上传的照片确实显示为state.photo的新值，只是不显示。

Vue 组件

<v-avatar size="70" class="mb-2">
   <img :src="$store.state.photo" alt="$store.state.name" />
</v-avatar>

Vuex 商店

state: {
    photo: require('../../backend/public/users/default.jpg')
  },

我在组件的数据中尝试了以下但它不起作用。我错过了什么？

data() {
    return {    
      photo: require(`../backend/public/users/${this.$store.state.photo}`)
    };
  },

Answer 1

当用户没有上传他们的图片时显示默认图片是一个表现问题，而不是一个逻辑状态问题；你不应该为此使用 Vuex。您可以使用 photo: null 来初始化 state/data，这样可以更好地模拟当前不存在的照片。

此外，对于这种静态资产，使用相对路径不是一个好主意，如果您将组件移动到另一个文件夹，这将会中断。相对较新的 vue-cli 项目配置为使用 @ 作为 src 文件夹。

所以你的组件看起来像

<v-avatar size="70" class="mb-2">
   <img :src="$store.state.photo || '@/backend/public/users/default.jpg'" alt="$store.state.name" />
</v-avatar>

而且只要您实际将空值初始化为 null 而不是 '' 之类的东西，它就应该如您所愿

Trouble using uploaded photo stored in vuex in vue component