Using next/image adds blurwidth and blurheight attributes

[okonet]

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/zen-surf-33vcdj?file=%2Fpages%2Findex.tsx%3A2%2C46

To Reproduce

1. Open code sandbox
2. Check out the DOM and find the img element.
3. See how it has unsupported attributes
4. Check out build console where React is warning about it

Current vs. Expected behavior

There should be no unsupported attributes added to the IMG tag

Verify canary release

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

Provide environment information

Whatever CodeSandbox uses. I'm on Mac M1 but it doesn't matter since it's not related to the environment but React code.

Which area(s) are affected? (Select all that apply)

Image optimization (next/image, next/legacy/image)

Additional context

It's been around since next@12 initial next/image I believe.

[Utkarshn10]

I just saw in code that blurheight and blurwidth are specifically referred in the code. Since they aren't standard HTML attributes then why have they been used here?

[joostdecock]

Possibly related, the webpack SVG loader (in NextJS) does add this, no need to use next/image.

This import:

import shoulderslope from './shoulderslope.svg'

Gives me this result

{ 
  src: "/_next/static/media/shoulderslope.a9c4f3f6.svg", 
  height: 1500, 
  width: 2000, 
  blurHeight: 0.
​​  blurWidth: 0
​​}

I got then spread the properties of that import into an <img /> tag:

<img {...importedSvg} />

That gave me the error about blurHeight and blurWidth not being valid, which in turn is how I found this issue.

In my case, the fix was simply to not spread but only use what I needed:

<img src={importedSvg.src} height={importedSvg.heigth} width={importedSvg.width} />

I wanted to share this here to clarify that this can bite you even when not using next/image.

[pei-tinybird]

I'm able to reproduce the same problem, using the setup according to the documentation.

The imported image has the blurWidth and blurHeight attributes which are not supported by the next/image component.

The NextJS versión I'm using is 14.2.7.