Placeholder support

[pi0]

Basic placeholder property is currently supported for <NuxtImg> (via #477).

Usage: This will auto-generate a URL from same source and 10x10 dimensions:

<nuxt-img src=".." placeholder>

It is also possible to give a custom placeholder (data)URL as a string or an array [width, height, quality] to customize URL generation behavior.

The original image will be loaded during hydration and after mounted.

Future enhancements:

• Fetch and inline placeholder as data: url
• Support smoother blurry versions when possible (depends on provider)
• Start loading images in parallel to hydration.

[shadow81627]

I use vuetify image component for the lazy loading source and generate a small 10 pixel image.

<v-img
    :lazy-src="$img(src, { width: 10, quality: 70 })"
    :src="$img(src, { quality: 70, height: 500 })"
    height="500"
></v-img>

[Rigo-m]

Any ETA for this?

[creazy231]

also would really like to see such a feature 👍

[agnelnieves]

same here

[omp-git]

please merge this cool feature :)