Search code examples
javascriptreactjsimagenext.jsblur

How to present a blurred version of an image in NextJS as it's being downloaded?

I'm looking for a similar effect as this one below:

blur image effect

I have done something similar with Gatsby, but I'm wondering if this is possible to do with NextJS?

Solution

  • You can do it without using an external library with not much code.

    https://codepen.io/darajava/pen/GRZzpbB?editors=0110

    I added animations in there too on load. The image will fit to the width of its parent container. Usage is simple:

    <LoadImage largeImageSrc={url} smallImageSrc={url} />