React.js : comment accéder à une image dans le répertoire public (public folder) ?

Le framework ReactJS possède, comme tous les frameworks, une structure spécifique. Il contient entre autres un répertoire nommé "public". Ce répertoire contient les fichiers que va pouvoir voir l'utilisateur. On y retrouve le fichier index.html qui va être la base du site, mais aussi les différents médias que vous pouvez voir sur le site (images, vidéos…). Le code du framework, notamment celui des composants, est situé dans d'autres répertoires. Le but est de "masquer" le plus possible le code source pour des raisons de sécurité. Le code du framework étant organisé de cette manière, il est facile depuis le code d'un composant d'afficher une image stockée dans le dossier "public".

Par défaut, le framework ReactJS effectue toutes les configurations nécessaires pour que le répertoire "public" soit considéré comme la racine de votre application. Si vous indiquez donc le caractère "/", vous serez dans ce dossier. Vous pouvez donc ensuite afficher facilement une image.

//Affichage d'une image située à la racine du dossier public

Le framework possède dans sa configuration une variable contenant directement l'URL vers le répertoire public. Si pour des raisons de configuration de votre serveur, vous ne pouvez pas utiliser simplement le chemin direct, vous pouvez utiliser la variable "process.env.PUBLIC_URL" pour afficher une ressource située dans le dossier "public".

Une autre option possible pour pointer vers le répertoire public est d'utiliser le nom de domaine. Le fait d'afficher la page d'accueil revient à se rendre dans le répertoire "public". Vous pouvez donc utiliser votre nom de domaine seul pour afficher l'image. Afin que cela reste dynamique, il est possible d'utiliser une variable JavaScript qui retourne automatiquement la racine de votre site internet. Il s'agit de la variable "window.location.origin".

JavaScript