Next.js Discord

Discord Forum

Next/Image placeholder blur not covering entire image

leeritter posted this in #help-forum
Open in Discord
I'm using the Next 13 Image component and passing a 10x10px base64 image as the blurDataURL and placeholder set to "blur". The blurred image is showing up while the src asset loads, however it is not covering the full space of the final image. It renders as a square, centered over the loading image, which is a 16/9 rectangle, so it looks weird that the place holder is a totally different aspect ratio.

It looks like the CSS applied to the blur has the property background-size: cover so I'm confused why this isn't working. Anyone have thoughts on how to address this? Thanks!

0 Replies