Here’s how I use Cloudinary to generate blurred placeholder images for all the post images on my blog.
CloudinaryBlurHash.ts
import {CLOUDINARY_URL} from '@/links';
export async function getBase64Image(imageId: string): Promise<string> {
const response = await fetch(
`${CLOUDINARY_URL}/w_100/e_blur:1000,q_auto,f_webp${imageId}`
);
const buffer = await response.arrayBuffer();
const data = Buffer.from(buffer).toString('base64');
return `data:image/webp;base64,${data}`;
}