NuxtImg placeholder is shown regardless of src changes

I have NuxtImg component with dynamic src and a placeholder. Only the placeholder is displayed.

<script setup lang="ts">
...
const { data } = useExample()
const photo = computed(() => getLogo(data.value?.name ?? ""))
</script>

<template>
  <NuxtImg :src="photo" class="h-10 w-10 sm:h-12 sm:w-12" placeholder="/logos/placeholder.png" />
</template>

<script setup lang="ts">
...
const { data } = useExample()
const photo = computed(() => getLogo(data.value?.name ?? ""))
</script>

<template>
  <NuxtImg :src="photo" class="h-10 w-10 sm:h-12 sm:w-12" placeholder="/logos/placeholder.png" />
</template>

<script setup lang="ts">
...
const { data } = useExample()
const photo = computed(() => getLogo(data.value?.name ?? ""))
</script>

<template>
  <NuxtImg :src="photo" class="h-10 w-10 sm:h-12 sm:w-12" placeholder="/logos/placeholder.png" />
</template>

<script setup lang="ts">
...
const { data } = useExample()
const photo = computed(() => getLogo(data.value?.name ?? ""))
</script>

<template>
  <NuxtImg :src="photo" class="h-10 w-10 sm:h-12 sm:w-12" placeholder="/logos/placeholder.png" />
</template>

The placeholder is seen when data returns empty value. The page has a drop down to select value from a list, once the user updates it I see the

src

src

value updated (in vue tools) but the placeholder is displayed instead of the actual image.

How do I update NuxtImg when src is dynamic and has a placeholder?

NuxtImg placeholder is shown regardless of src changes

Similar Threads

Similar Threads

Similar Threads