Open okonet opened 11 months ago
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?
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
.
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.
Link to the code that reproduces this issue
https://codesandbox.io/p/sandbox/zen-surf-33vcdj?file=%2Fpages%2Findex.tsx%3A2%2C46
To Reproduce
img
element.Current vs. Expected behavior
There should be no unsupported attributes added to the IMG tag
Verify canary release
Provide environment information
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.