How to display a placeholder while the image is loaded in Next.Js?

Question

I'm getting some images from Firebase using getStaticProps, and then displaying them with next Image component. However, they take a while to display, how can I display a placeholder while they haven't loaded?

Answer 1

There is an experimental merged pull request on thery @canary branch. If you want to try it out just update your nextjs version on the latest canary released. Just add a new placeholder="blur" props on the Image component.

Or you can use this package.

Edit: Nextjs 11 now has officially released the placeholder='blur' props for the <Image> component. You can read here more about this image placeholders. Make sure you update your nextjs, react, react-dom versions by running npm i next@latest react@latest react-dom@latest

Answer 2

use placeholder property, a placeholder to use while the image is loading, possible values are blur or empty. Defaults to empty.

When blur, the blurDataURL property will be used as the placeholder. If src is an object from a static import and the imported image is jpg, png, or webp, then blurDataURL will automatically be populated.

notice that for dynamic images, you must provide the blurDataURL property. the contents of "blurDataURL" property should be a small Data URL to represent the image.