I am quite new to code (and definitely don’t know much).

I am building my design portfolio and I want that images load with Next Image’s placeholder blur, the problem is that it’s throwing me this error:

Error: Image with src "/projects/ellingsen/Imagen%201.webp" has "placeholder='blur'" property but is missing the "blurDataURL" property. Possible solutions: - Add a "blurDataURL" property, the contents should be a small Data URL to represent the image - Change the "src" property to a static import with one of the supported file types: jpeg,png,webp,avif (animated images not supported) - Remove the "placeholder" property, effectively no blur effect Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url

Although these are static (are in my public folder), it won’t even recognize the width and height of them. I have been trying to fix it myself, but can’t seem to find and answer.

My mdx.jsx looks like this:
enter image description here

Thanks in advance.

I have tried to set up a getBase64 function but I ended up with a “module not found: can’t resolve “child_process”