Comment gérer correctement les chemins d’image dans les projets React.js ?

Approche correcte pour les chemins d'images dans React.js

Déterminer le chemin correct pour les images dans les projets React.js a été un défi courant. Traditionnellement, des chemins relatifs étaient utilisés dans l'attribut src, en fonction de la structure des fichiers du projet. Cependant, dans les projets React.js construits avec create-react-app, cette approche peut ne pas toujours fonctionner.

Cela ressort clairement de l'exemple fourni, où les images s'affichent correctement lorsque l'itinéraire est "/details/2 " mais pas quand il s'agit de "/details/2/id." Cette incohérence se produit car le chemin relatif est interprété en fonction de la structure de l'URL plutôt que de l'architecture du fichier.

Pour résoudre ce problème, une méthode alternative est recommandée pour définir les chemins d'image dans les projets React.js. Au lieu d'utiliser des chemins relatifs dans l'attribut src, les images peuvent être importées à l'aide de l'instruction import. Par exemple :

import logo from './logo.png';

class Nav extends Component {
  render() {
    return (<img src={logo} alt="logo" />);
  }
}

Dans cette approche, l'instruction d'importation spécifie le chemin relatif vers le fichier image, et l'image est ensuite stockée en tant que variable. Lors du rendu du composant, cette variable est utilisée comme source de l'image.

Cette méthode garantit que le chemin de l'image reste cohérent entre les différentes routes gérées par React-router, car le chemin relatif est établi lors du processus d'importation. et non basé sur la structure actuelle de l'URL. En conséquence, toutes les images s'afficheront correctement quel que soit l'itinéraire spécifique auquel vous accédez.

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!