Je crée une application de réaction avec create-react-app et react-router. Je souhaite obtenir le chemin de l'URL racine de mon application react car elle peut être diffusée dans un emplacement différent:
Les liens vers les différentes pages ne sont pas affectés par cette différence car react-router gère le to-location en fonction du chemin racine de react.
En fait, mes images sont stockées dans le chemin public, donc, je peux y accéder dans les emplacements de base: /
<img src={images/example.png}>
mais si Je suis dans une sous-page ou juste si l'URL se termine par un "/" comme /
<img src={images/example.png}>
ne fonctionnera pas car le navigateur recherche l'image dans / au lieu de /images/example.png .
De plus, si je règle l'image src sur /images/example.png Cela ne fonctionne que sur localhost mais pas en production car en production, le navigateur recherche l'image sur example.com/images/example .png au lieu de example.com/interface/images/example.png
C'est pourquoi j'ai besoin d'obtenir le chemin de l'URL racine de réaction. Cela me permet d'obtenir "/" dans localhost et "/ interface /" en production par exemple
Merci de votre aide
3 Réponses :
Cela peut être fait en définissant la propriété homepage dans package.json .
Lors de la construction du projet, vous voyez un message l'expliquant:
Le projet a été construit en supposant qu'il est hébergé à la racine du serveur. À écrasez ceci, spécifiez la page d'accueil dans votre package.json. Par exemple, ajoutez ceci pour le créer pour les pages GitHub:
"homepage": "http://myname.github.io/myapp"
Voir la documentation: Déploiement: création de chemins relatifs
Si vous faites cela, il devrait également fonctionner en production lorsqu'il fonctionne sur votre environnement de développement local.
Dans votre cas, définissez "homepage": "https://example.com/interface/" pour le faire fonctionner en production. Vous n'avez pas besoin de code supplémentaire pour cela.
Gardez à l'esprit que vous devrez peut-être importer correctement les chemins de l'image, afin que la logique soit gérée par webpack. Vous ne devriez pas avoir de vrais chemins Web dans vos composants, importez simplement des éléments à partir des chemins que vous avez dans votre environnement de développement et la magie opère.
import example from 'images/example.png';
[...]
<img src={example} />
Voir Ajout d'images, de polices et de styles et Utilisation du dossier public : Quand utiliser le dossier public
En important l'image avec Webpack, elle ne peut pas être stockée dans le dossier public? Dois-je stocker l'image dans le dossier src?
Oui. Si cette image est liée à la logique du composant (par exemple, le composant Logo a une image de logo à afficher, le composant ProfilePicture a une image par défaut pour montrer si maintenant l'image a été définie par l'utilisateur), il est logique de stocker cette image avec le composant. En fonction de la taille de cette image importée, le webpack l'inclura soit en base64 dans JavaScript (cela a du sens pour les petites icônes pour enregistrer les demandes), soit le déploie avec un ID unique dans / static / media /. Les images d'application sont des actifs et lorsque votre application est mise à jour, vous voulez vous assurer que l'utilisateur voit la nouvelle image. Webpack gère cela.
@ Aurélien pour plus de détails, voir ici Ajout d'images, Polices et fichiers
Si je comprends bien votre problème, vous voulez pouvoir définir un chemin racine différent en fonction de votre environnement de développement et de votre environnement de production.
Heureusement, create-react-app vous permet de créer des variables d'environnement à l'aide d'un fichier .env .
Vous aurez besoin de l'un de ces fichiers sur votre site local et en production. Veuillez noter que vous NE DEVEZ PAS ajouter ces fichiers au contrôle de version car ils contiennent généralement des clés secrètes, et même si ce n'est pas le cas, c'est une bonne pratique.
Une fois que vous avez créé un fichier .env , vous devrez préfixer toutes vos variables d'environnement avec REACT_APP , donc dans ce cas, < code> REACT_APP_ROOT_PATH .
Vous devrez ensuite le paramétrer comme suit;
REACT_APP_ROOT_PATH = localhost / pour votre environnement local, et
REACT_APP_ROOT_PATH = example.com / interface / pour votre environnement local.
Pour des utilisations plus avancées de cette fonctionnalité, voici une documentation: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env < / a>
J'espère que cela vous aidera.
@ Aurélien Ici vous voyez une description de PUBLIC_URL . Ce n'est pas ce que tu veux. REACT_APP_ROOT_PATH n'y est même pas documenté. Vous devez suivre Deployment: Building for relative pahts < / a>
@ Frébo La raison pour laquelle il n'est pas documenté est qu'il s'agit d'une variable personnalisée qui est définie par l'utilisateur. Tant que vous préfixez les variables env avec REACT_APP_ , create-react-app les récupère et vous pouvez les utiliser dans votre code. Ceci est documenté ici
J'ai trouvé la solution: Webpack récupère l'URL racine de réaction dans la variable env PUBLIC_URL
La solution est de changer l'image src:
<img src=`${process.env.PUBLIC_URL}/images/example.png`
cela fonctionne en production, en développement et dans tous les autres contextes. Merci pour votre aide
Aucune infraction, mais bien que cela puisse fonctionner, cela contredit complètement le concept de pipeline d'actifs Webpack et vous posera des problèmes à un moment donné. Au lieu d'essayer de trouver une solution de contournement pour des problèmes inexistants, je vous encourage vivement à le faire de la bonne manière, surtout si vous êtes nouveau dans React. ;)
Essayez-le avec