Generating Base64 String for Placeholder Images
Unanswered
Saint Bernard posted this in #help-forum
Saint BernardOP
I'm currently working on a Next.js application where I'm implementing a fallback mechanism for images using the 'plaiceholder' package. I attempted to create a custom hook (image attached) that should ideally fetch a base64 string to be passed into the blurDataUrl field on the Image component. However, upon calling this hook within my app, I encountered an error (also attached).
I'd greatly appreciate any assistance in resolving this issue or alternative approaches to achieve the desired outcome. The aim is to generate a base64 string for the blurDataUrl field in the Image component while utilizing client components in Next.js.
I'd greatly appreciate any assistance in resolving this issue or alternative approaches to achieve the desired outcome. The aim is to generate a base64 string for the blurDataUrl field in the Image component while utilizing client components in Next.js.
16 Replies
@Saint Bernard I'm currently working on a Next.js application where I'm implementing a fallback mechanism for images using the 'plaiceholder' package. I attempted to create a custom hook (image attached) that should ideally fetch a base64 string to be passed into the blurDataUrl field on the Image component. However, upon calling this hook within my app, I encountered an error (also attached).
I'd greatly appreciate any assistance in resolving this issue or alternative approaches to achieve the desired outcome. The aim is to generate a base64 string for the blurDataUrl field in the Image component while utilizing client components in Next.js.
look like
getPlaiceholder is using node api which is not available in browserUsually, its better to generate the
blurDataUrl and save it to db then when you query the record, you get the image url and the blurDataUrlSaint BernardOP
wouldnt that take just as much time as fetching the image?
@Ray look like `getPlaiceholder` is using node api which is not available in browser
Saint BernardOP
i suppose i could utilize the api routes to do something here?
@Saint Bernard i suppose i could utilize the api routes to do something here?
yes you could do that but It might have some performance issue since you are generating the base64 when loading the image
@Ray yes you could do that but It might have some performance issue since you are generating the base64 when loading the image
Saint BernardOP
hmmm yeap yeap.. do you have a preferred way of doing this besides storing in db and querying later?
well maybe store it in memory/redis/other cache instead of storing in db
what are you trying to achieve? are those image from a remote site?
Saint BernardOP
im just trying to show the blurry states while the images are loading, image urls are from our gc storage
actually i dunno how the backend is persisting images but i suppose something like that
takes inordinately long for the images to come in so
yeah the preferred way would be generating the base64 when storing the image
if you host the app in a nodejs, you could generate it in api route and store it in memory using
lru-cacheunstable_cache should work tooSaint BernardOP
great, thanks, lemme look into these