Not working on latest version of nextjs

[Stevemoretz]

None of the versions of this library are working so here's a quick replacement as I couldn't find any, I made my own but I don't have the time to turn it into a library I put my code here and anyone can make it into a library or maybe this repo adapts it.

How to make it work

All credits of the functionality goes to https://gist.github.com/mattiaz9 I was only able to make this work thanks to his function at:
https://gist.github.com/mattiaz9/53cb67040fa135cb395b1d015a200aff

1. Copy and paste that into your project under a file named: blurHashToDataURL.ts
2. Copy and paste my component in a file named: ImageHash.tsx

import {blurHashToDataURL} from "@src/lib/blurhash/blurHashToDataURL";
import Image from "next/image";
import {useMemo} from "react";

type Props = {};

export default function ImageHash({
    blurhash,
    ...props
}: React.ComponentProps<typeof Image> & {blurhash?: string}) {
    const base64BlurHash = useMemo(() => {
        if (blurhash) {
            return blurHashToDataURL(blurhash);
        }
        return null;
    }, [blurhash]);

    return (
        // eslint-disable-next-line jsx-a11y/alt-text
        <Image
            placeholder="blur"
            blurDataURL={base64BlurHash || undefined}
            {...props}
        />
    );
}

Install blurhash using npm|yarn|bun.

Usage example

Not that ImageHash's syntax is exactly the same as Image component from nextjs it just adds one new prop: blurhash pass your blurhash and you're done.

<ImageHash
    blurhash={value.photo_hash}
    src={`/image.png`}
    width={500}
    height={375}
/>

[jelling]

@ivansevillaa please consider either adopting the fix or shutting this repo down and deprecating the NPM package.

I lost several hours trying to debug this issue and I'm certain others have as well.