N
Nuxt•3w ago
lazygopher

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>
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 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?
2 Replies
kapa.ai
kapa.ai•3w ago
Hi @lazygopher. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When using the <NuxtImg> component with a dynamic src and a placeholder, the placeholder should only be shown while the actual image is loading. If the src changes and the placeholder remains visible (even though the src is updated in Vue DevTools), this usually indicates that the new image cannot be loaded (e.g., the path is invalid, the image does not exist, or there is a caching issue). Key points from the documentation: - <NuxtImg> will show the placeholder until the image is fully loaded. If the image fails to load (404 or other error), the placeholder will remain visible and the image will not update. - The src prop should be an absolute path to a file in the public/ directory, or a valid URL, or a path expected by your configured provider. If you use a computed property for src, ensure it always returns a valid, resolvable path or URL. Otherwise, the image will not load and the placeholder will persist. - You can provide your own placeholder image using the placeholder prop, as you are doing. If you want to debug further, try using the browser's network tab to see if the image request is returning a 404 or other error. Also, check that your computed photo value is always a valid string and not undefined or null when the data updates. Example from the docs: 
<NuxtImg src="/nuxt.png" placeholder="./placeholder.png" />
<NuxtImg src="/nuxt.png" placeholder="./placeholder.png" />
This will show the placeholder until /nuxt.png is loaded. If /nuxt.png does not exist, the placeholder remains visible NuxtImg placeholder usage. Troubleshooting steps: 1. Ensure that getLogo(data.value?.name ?? "") always returns a valid image path or URL. 2. Make sure the image exists at the resolved path. 3. Check the browser network tab for failed image requests. 4. If you want to handle the case where the image is missing, you can use the custom prop and slot to show a fallback image or message if the image fails to load NuxtImg custom rendering. Custom fallback example: 
<NuxtImg
  :src="photo"
  :custom="true"
  v-slot="{ src, isLoaded, imgAttrs }"
>
  <img v-if="isLoaded" v-bind="imgAttrs" :src="src" />
  <img v-else src="/logos/placeholder.png" alt="placeholder" />
</NuxtImg>
<NuxtImg
  :src="photo"
  :custom="true"
  v-slot="{ src, isLoaded, imgAttrs }"
>
  <img v-if="isLoaded" v-bind="imgAttrs" :src="src" />
  <img v-else src="/logos/placeholder.png" alt="placeholder" />
</NuxtImg>
This way, you have full control over what is displayed if the image fails to load or is still loading. Summary:
If the placeholder remains after changing src, it is likely because the new image cannot be loaded. Double-check your computed src value and ensure the image exists at that path. Use the custom prop and slot for more advanced fallback handling if needed NuxtImg placeholder usage NuxtImg custom rendering. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@693201794137981049> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?