我可以上傳一張照片用作頭像，但只能顯示我的默認照片。當我嘗試訪問新上傳的檔案時，組件顯示 $store.state.photo。我相信我可能需要照片因為與 webpack 有關，但我不明白我應該在哪里做。我能夠在我的 vuex 商店中做到這一點，但不能在組件內做到這一點。
當我檢查 vue dev 工具時，剛剛上傳的照片確實顯示為 state.photo 的新值，只是不會顯示。
組件
<v-avatar size="70" >
<img :src="$store.state.photo" alt="在 vue 組件中使用 vuex 中存盤的上傳照片的問題" />
</v-avatar>
Vuex 商店
state: {
photo: require('../../backend/public/users/default.jpg')
},
我在組件的資料中嘗試了以下操作，但不起作用。我錯過了什么？
data() {
return {
photo: require(`../backend/public/users/${this.$store.state.photo}`)
};
},
uj5u.com熱心網友回復：
當用戶沒有上傳他們的圖片時顯示默認圖片是一個展示問題，而不是一個邏輯狀態問題；你不應該為此使用 Vuex。您可以使用它來初始化狀態/資料photo: null，從而更好地模擬當前不存在的照片。
此外，對于此類靜態資產，使用相對路徑是一個壞主意，如果您將組件移動到另一個檔案夾，則會中斷。相對較新的 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而不是類似的東西''，它就應該做您想做的事
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/348566.html
上一篇：檢查元素是否在x秒前創建