Implement Lqip in ImageKit SDK

[hanihusam]

Overview

I am using ImageKit SDK to build a URL for my React App. I choose the native way instead of imagekit-react for some reasons. However, I am facing an issue with a low-quality image placeholder (lqip in imagekit-react). How can I implement it using ImageKit SDK?

[hanihusam]

For more context

     <img
        id={id}
        width='100%'
        height='100%'
        loading='lazy'
        onClick={onClick}
        {...imageKitUrlBuilder(url, [
          { height: '100%', width: widthVar, cropMode: 'extract' },
          // { quality: '20', blur: '10' },
        ])}
      />

Inside of imageKitUrlBuilder

const imagekit = new IKCore({
  publicKey,
  urlEndpoint,
});

function imageKitUrlBuilder(
  src: string,
  transformation?: TransformationOptions
) {
  if (!src.includes('imagekit.io')) return { src };

  return {
    src: imagekit.url({
      src,
      transformation,
    }),
  };
}