image icon indicating copy to clipboard operation
image copied to clipboard
verified publisher icon nuxt

placeholder doesn't work with <NuxtPicture>, only <NuxtImg>

Open Resumane opened this issue 11 months ago • 2 comments

placeholder doesn't work with NuxtPicture, only NuxtImg. I've tried it on the playground, a NuxtImg side by side with a NuxtPicture, both identical with placeholder. Only NuxtImg displays the placeholder.

I assume that's a bug because the documentation says that "NuxtPicture is almost identical to NuxtImg"

Resumane avatar Mar 14 '25 06:03 Resumane

The recent changes to placeholder were added only in the nuxt-img component but not replicated in the nuxt-picture component.

We could:

  1. Add the missing feature for the nuxt-picture
  2. Inform in docs that the placeholder is not available for this component

Not sure btw what is the relation between NuxtImg and NuxtPicture as NuxtPicture does not use NuxtImg under the hood. Maybe there was an intention to keep them completely separate?

What would be your approach @danielroe ? :)

Baroshem avatar Mar 19 '25 13:03 Baroshem

I am facing the same issue. Relying on <NuxtImg> placeholder to render blurred placeholders, swapped for <NuxtPicture> to generate AVIF/WEBP as per docs, but placeholders no longer work.

Any updates on this please, @danielroe @Baroshem?

chrisjansky avatar Sep 08 '25 12:09 chrisjansky