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 :)

[mrleblanc101]

@pi0 Why is the default placeholder 10x10 ? Shouldn't it preserve the aspect-ratio of the original image ? Currently it cause major layout shift. I guess I could set the ratio using :placeholder=[width, height], except that my Images come from .yml fetched by Nuxt-content so I don't know their dimension and they are not all the same.

Placeholder image:

Source image:

[mrleblanc101]

Otherwise it works well for static image.

Source image:

Placeholder image:

[enricodeleo]

Is there any way I can tell placeholder to respect preset ?

[Flo2315]

Hi @pi0 Nice feature 🚀, but it doesn't seem to work with the cloudimage provider.

[vedmant]

Is there any way to add a placeholder globally and that's a data url like: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

[Kolobok12309]

By src code is not worked with srcset(browser ignore src and use srcset) and load full-size img for mobiles in parallel https://github.com/nuxt/image/blob/bc9ddc0caf4fe32b63f18118ad1b392c7160ddf9/src/runtime/components/nuxt-img.ts#L99-L108

[Kolobok12309]

@mrleblanc101 We use imgproxy and if i set :placeholder=[10, 0, 80] imgproxy save aspect-ratio with width 10px Mb your provider has something similar

[mtzrmzia]

Otherwise it works well for static image.

Source image:

Placeholder image:

@mrleblanc101 I have the same issue, did you fix it?

[ekkaiasmith]

It would be nice if the placeholder could be a base64 sent in HTML to the client rather than an additional asset to load.

[pi0]

For quick history, we used to load image meta to find aspect ratio using image-meta and also fetch the contents using async data and inline base64 version in earlier versions of image v0. This feature was rolled back due to instability. Also thinking to support a pluggable way to support different algorithms for blurry image other than lowres base64.

If someone is interested, a PR is welcome to add back this feature via an experimental flag.

[pi0]

/cc @farnabaz