Next.js Discord

Discord Forum

Next Image not showing blur on loading

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Hello, I am using Next Image with blur as the placeholder I tested it with throttling but it doesn't seems to work

 <Image
                    src="https://imagedelivery.net/..."
                    alt="hero-image"
                    width={1366}
                    height={768}
                    quality={100}
                    placeholder="blur"
                    className="bg-slate-200 h-full w-full object-cover object-center"
                    blurDataURL="https://imagedelivery.net/..."
                />

11 Replies

American Chinchilla
blurDataURL needs to be a base64 encoded image:

https://nextjs.org/docs/app/api-reference/components/image#blurdataurl
Asiatic LionOP
Oh thanks
it worked thanks again
American Chinchilla
ofc!
Asiatic LionOP
Never used blur with next image
American Chinchilla
yeah, i had some trouble with it the first time i used it so i saw what was up right away 😆
Asiatic LionOP
:)
Somali
Is there a way to generate the base64 encoded image on demand?
One way I've heard of
Somali
Awesome thanks for the link!