Using next/image adds `blurwidth` and `blurheight` attributes
Open
Nobody has claimed this yet.
bug
Image (next/image)
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/sandbox/zen-surf-33vcdj?file=%2Fpages%2Findex.tsx%3A2%2C46
To Reproduce
- Open code sandbox
- Check out the DOM and find the
imgelement. - See how it has unsupported attributes
- 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and inspect the next/image output in the DOM and build console. Trace the image optimization component responsible for the img element, then verify that the unsupported attributes and React warning are absent while the existing image behavior remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react
- Domain
- frontend, performance, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100