[Bug]: Replace <img> tags with next/image to satisfy Next.js lint warnings
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
Summary
The project currently triggers @next/next/no-img-element lint warnings because raw <img> tags are used in a few components. These should be reviewed and replaced with Image from next/image where appropriate.
Page
N/A
Details
Running the lint command reports @next/next/no-img-element warnings in the following files:
src/components/Layout/HomeContent.jssrc/components/MDX/MDXComponents.tsx
Warning count:
HomeContent.js: 4 occurrencesMDXComponents.tsx: 3 occurrences
Using raw <img> elements in a Next.js app bypasses built-in image optimization and triggers lint warnings. Replacing them with Image from next/image would align the codebase with Next.js best practices.
Note:
Some usages, especially in MDX-related rendering, may require additional handling and should be updated carefully rather than through a blind replacement.
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
Inspect src/components/Layout/HomeContent.js and src/components/MDX/MDXComponents.tsx, then run the lint command to review the seven reported occurrences. Replace suitable raw img elements with next/image while handling MDX rendering carefully, and confirm the @next/next/no-img-element warnings are resolved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js
- Domain
- documentation, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100