Dynamic src of UAvatar not loading properly on page reload
I have a component
<div>
<UAvatar :src="selectedPlayer.photo" icon="i-lucide-user" size="3xl" class="ring-2 ring-neutral" />
<USelectMenu
v-model="selectedPlayer"
:items="data.value || []"
/>
</div>
Where selectedPlayer is updated with
const { data, status } = useFetch("/api/player", { lazy: true })
watchEffect(() => {
if (data.value) {
selectedPlayer.value = { id: data.value.playerId, label: data.value.playerName }
}
})
When the page loads, the select menu selects the proper item but the Avatar picture is not loading.
If I change the item in the select menu, it works. How can I fix that?
2 Replies
Hi @lazygopher. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The issue you're experiencing is likely due to the structure of the
Make sure
selectedPlayer object. In your UAvatar, you are binding :src="selectedPlayer.photo", but when you set selectedPlayer.value in your watchEffect, you only provide id and label—not photo. This means that on initial load, selectedPlayer.photo is undefined, so the avatar image does not load. When you select an item from the menu, the full object (including photo) is set, and the avatar updates correctly.
To fix this, ensure that when you set selectedPlayer.value, you include the photo property:
This approach is consistent with how fetched items are structured in the Nuxt UI examples, where each item includes all necessary properties (like avatar or photo) used by the UI components. For example, in the official docs, items are mapped to include avatar: { src: ... } when using avatars in select menus or input menus, ensuring the UI component has the data it needs to render the image properly With fetched items.
If your API response uses a different property name for the photo, adjust accordingly.
Summary:Make sure
selectedPlayer always contains the photo property when you set it, so <UAvatar :src="selectedPlayer.photo" ... /> has the correct value on initial load.
If you follow this pattern and the image still does not load, double-check that the image URL is valid and accessible, and that the property name matches what your API returns UAvatar usage.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@693201794137981049> Kapa.ai is still learning and improving, please let me know how I did by reacting below.