Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
The BlurHash algorithm analyzes an image and generates a string that serves as the image's placeholder. This process is usually done at the backend of your service, where the image URL is stored, so you can keep the BlurHash string alongside the image URL.
However, there is a Next.js Image blurDataURL generator created by Jimmy Chion, that generates an image's BlurHash and Base64 data URL. You can fork the repo on GitHub and implement it into your project.
In contrast, the fourth figure element maps through an array of image object data which mocks the data we’ll get from the backend. We’ll store our mock data in the public folder inside the images.jsfile. You can access the mock data on GitHub.
From my research, I could not find any Next.js package that could help me with the conversion from BlurHash's Base83 data URL to a Base64 data URL, or any Next.js implementation that works for dynamic images. The few packages I found, like the recently published use-next-blurhash and plaiceholder.co, do not work with Next.js for dynamically stored images.