How to get the data:base64 string to use with next/image?

[notflip]

I'm trying to implement this package with next/image, however I think the blurhash string needs to be converted to a base64 string to work with next/image? This is my current code, which is not rendering the blurhash

    <Image
      src={`${media.url!}?${media.updatedAt}`} alt={`Image box alt`}
      width={1920}
      height={1080}
      className={imageClassName}
      sizes={sizes}
      style={{objectFit: "cover"}}
      quality={95}
      fill={fill}
      placeholder={media.blurhash ? "blur" : undefined}
      blurDataURL={media.blurhash || undefined}
    />

Thanks!

[ChillerPerser]

As you mentioned do a convert from blurhash into a base64 string.

For example im using this (i dont know the source anymore, if anyone knows feel free to comment):
Gist

Its based on:

• https://gist.github.com/mattiaz9/53cb67040fa135cb395b1d015a200aff
• https://github.com/wheany/js-png-encoder/blob/master/generatepng.js