How can I apply blur effect while loading image with next.js 13 image component

Unanswered

West African Lion posted this in #help-forum

West African LionOP

2023-09-03T13:59:40.000Z

like i said i want to show blur or something like placeholder when uploading image help me

9 Replies

2023-09-03T14:09:39.000Z

You need to use the blurDataURL prop

West African LionOP

2023-09-03T14:19:13.000Z

I don't understand how to use

2023-09-03T14:43:44.000Z

Use plaiceholder (lib)

read the article, it mentions on how you could generate the blurdata using the external libs

such as Plaiceholder

If the remote URL doesn't have a blurred version then you need to generate the blurDataURL first by fetching the image from imdb

2023-09-03T14:49:47.000Z

Take a look at [Plaiceholder's documentation](https://plaiceholder.co/docs)

This is one of the many services you can use to generate the blur data of your images and then pass it to your image components