Need Help with Generating blurDataURL for Images in a JSON File for Next.js 13
Unanswered
Mini Rex posted this in #help-forum
Mini RexOP
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?
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?
5 Replies
European sprat
https://nextjs.org/docs/app/api-reference/components/image#blurdataurl has all the information you need to know
Mini RexOP
I have read the documentation and nothing seems to address my use case outlines above. Could you explain why you think it does? @European sprat
European sprat
" 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
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
Mini RexOP
I understand that, but as the title of my post says the question I have is how to generate the Base64 placeholders on the fly.