#Need Help with Generating blurDataURL for Images in a JSON File for Next.js 13

6 messages · Page 1 of 1 (latest)

green shoal
#

I'm working on a Next.js 13 project where I have a JSON file containing various albums. Each album entry includes a URL for its cover image. In my application, there's a specific page dedicated to displaying these albums along with their artwork.

At the top of this page, I've implemented filter buttons allowing users to sort albums by genre. To manage the selected genre dynamically on the client-side, I'm using useState and the "use client" directive. So far, this setup works as intended.

However, I'm facing a challenge: I'd like to add the placeholder blurDataURL for each image sourced from the JSON file. I tried using plaiceholder.co, but it didn't seem to work.

Could anyone guide me on how to generate the blurDataURL for these images efficiently?

thin onyxBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

silver thorn
green shoal
#

I have read the documentation and nothing seems to address my use case outlines above. Could you explain why you think it does? @silver thorn

silver thorn
#

" I'd like to add the placeholder blurDataURL for each image sourced from the JSON file."

the docs say you need to have a base64 encoded string that gets used as the blurDataURL and/or statically import the files

#

so you can either put the base64 encoded string in the JSON or use static imports