blurDataUrl error when using correct file format

[AsherWright]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

I get this error:

Error: Image with src "/dice.png" 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
            - Remove the "placeholder" property, effectively no blur effect
          Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url

When I run my dev server, even though the image I'm using is one of the supported file types (png). I may be missing something obvious, but I can't figure it out from the message above.

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When I run my dev server, I get an error about using the blur prop with Next Image. It tells me that I can't use it unless I'm using a supported file type, but I am using a supported file type.

Expected Behavior

The blur prop should work with a png.

Link to reproduction

https://codesandbox.io/s/gracious-haze-uy1w8p?file=/pages/index.tsx

To Reproduce

Start the dev server and look at the error.

[imPrathamDev]

Verify canary release

• [x] I verified that the issue exists in the latest Next.js canary release

Provide environment information

I get this error:

Error: Image with src "/dice.png" 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
            - Remove the "placeholder" property, effectively no blur effect
          Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url

When I run my dev server, even though the image I'm using is one of the supported file types (png). I may be missing something obvious, but I can't figure it out from the message above.

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When I run my dev server, I get an error about using the blur prop with Next Image. It tells me that I can't use it unless I'm using a supported file type, but I am using a supported file type.

Expected Behavior

The blur prop should work with a png.

Link to reproduction

https://codesandbox.io/s/gracious-haze-uy1w8p?file=/pages/index.tsx

To Reproduce

Start the dev server and look at the error.

you need to add blurDataURL={"/dice.png"} in next/image component. Just like that: <Image src={"/dice.png"} alt="splash" width="1000" height="500" blurDataURL={"/dice.png"} placeholder="blur" />

[iljamulders]

Just import the image:

width & height are not needed in this case

import Image from "next/image";
import dice from '../public/dice.png'

/** Add your relevant code here for the issue to reproduce */
export default function Home() {
  return (
    <div>
      <Image
        src={dice}
        alt="splash"
        placeholder="blur"
      />
    </div>
  );
}

[styfle]

Closing since this is expected behavior. The error message explains it:

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
• Remove the "placeholder" property, effectively no blur effect Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.