reactjs / reactjs/react.dev

[Bug]: Replace <img> tags with next/image to satisfy Next.js lint warnings

Ouverte
#8,416 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

bug: unconfirmed
Langage dominant
JavaScript
Étoiles
11.8k
Forks
7.9k
Merge moyen
1 j 11 h
PR mergées (30 j)
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.js
  • src/components/MDX/MDXComponents.tsx

Warning count:

  • HomeContent.js: 4 occurrences
  • MDXComponents.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.

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Inspectez src/components/Layout/HomeContent.js et src/components/MDX/MDXComponents.tsx, puis exécutez la commande de lint pour examiner les sept occurrences signalées. Remplacez les éléments img bruts appropriés par next/image en gérant soigneusement le rendu MDX, et confirmez que les avertissements @next/next/no-img-element sont résolus.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, next.js
Domaine
documentation, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
68/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.