Redundant `no-img-element` eslint rule when working in `@vercel/og` response jsx (app folder route handler)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 18.13.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.2.5-canary.2
eslint-config-next: 13.2.5-canary.2
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue
https://github.com/Arctomachine/next-og-img-eslint-warning
To Reproduce
pnpm install, warning might appear in your IDE alreadypnpm build, look at console warnings
Describe the Bug
When using route handler (app folder) to generate image with @vercel/og, next/image components and their benefits are not relevant here, it is not even working here. So using normal <img /> tag is perfectly valid in this scenario. But eslint gives this warning
Warning: Using
<img>could result in slower LCP and higher bandwidth. Consider using<Image />fromnext/imageto automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
Expected Behavior
Disable no-img-element rule when working inside @vercel/og response jsx.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
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 reproduction repository and run pnpm install, then pnpm build to observe the warning in an app-folder route handler generating image JSX with @vercel/og. The fix is done when @next/next/no-img-element no longer warns for that @vercel/og response JSX while remaining applicable elsewhere.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- eslint, javascript, next.js, react
- Domain
- tooling, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100