[Vuejs]-Trouble using uploaded photo stored in vuex in vue component

by

0👍

✅

Displaying a default picture when the users have not uploaded theirs is a presentation concern, not an logical state concern; you should not be using Vuex for that. You can initialize the state/data with photo: null instead, which better models that a photo does not currently exist.

Furthermore, for this sort of static assets it’s a bad idea to use relative paths, which will break if you ever move the component to another folder. Relatively newer vue-cli projects are configured to use @ as the src folder.

So your component could look like

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

And as long as you’re actually initializing empty values as null instead of something like '', it should do what you want

Leave a comment