Comment garantir un affichage cohérent des images sur les routes dans React.js ?

Comprendre le comportement du chemin d'origine racine

Dans les projets React.js, les chemins d'image utilisant l'attribut src ne sont pas basés sur la structure du fichier mais sur l'origine racine de l'URL. Cela signifie que si votre application est servie sur localhost/details/2, les images référencées avec des chemins relatifs seront chargées correctement tant que le chemin reste inchangé dans cette route. Cependant, si l'itinéraire devient localhost/details/2/id, les images peuvent ne pas s'afficher car l'origine racine a changé.

Résolution de la dépendance du chemin d'image sur les itinéraires

Pour garantir un affichage cohérent des images sur tous les itinéraires, envisagez d'utiliser des chemins absolus. Voici comment importer et référencer des images à l'aide de chemins absolus :

import myImage from '/img/myImage.png'; // Absolute path to image

function File1() {
  return <img src={myImage} alt="My Image" />;
}

En important des images en tant que modules, vous établissez un point de référence absolu qui reste cohérent quels que soient les changements d'itinéraire. Cette approche garantit que les images sont toujours récupérées à partir du bon emplacement.

Approches alternatives

Si vous préférez utiliser des chemins relatifs, vous pouvez utiliser ces alternatives :

• Utilisez le dossier public : Déplacez vos images vers le répertoire public, qui est automatiquement exposé par create-react-app et accessible depuis n'importe quel itinéraire avec un chemin relatif.
• Configurer Webpack : La modification de la configuration du Webpack vous permet de personnaliser la façon dont les chemins relatifs sont résolus. Cependant, il s'agit d'une solution plus complexe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!