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

image/src/runtime/components/nuxt-img.ts

Lines 99 to 108 in bc9ddc0

	onMounted(() => {
	if (placeholder.value) {
	const img = new Image()
	img.src = mainSrc.value
	img.onload = () => {
	imgEl.value.src = mainSrc.value
	placeholderLoaded.value = true
	}
	}
	})

[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

[chrisjansky]

@mrleblanc101 said:
@pi0 Why is the default placeholder 10x10 ?
Shouldn't it preserve the aspect-ratio of the original image ?

+1 for preserving aspect ratio of source images. Any progress on this? 🙏