Préparer les fichiers image

Une page de randonnée peut présenter les bonnes informations tout en restant difficile à parcourir si ses visuels sont absents ou mal rangés. Dans cette étape, vous préparez les fichiers forêt et montagne au bon emplacement, puis vous repérez le chemin à associer à chaque itinéraire. Leur affichage dans les pages sera réalisé dans les prochaines leçons.

Repérer les ressources locales

Dans le projet sentiers-randonnees, le dossier public contient les ressources statiques que vous souhaitez rendre accessibles par une URL. Les images prévues par le contrat du catalogue se trouvent dans public/images : foret.jpg et montagne.jpg. Conservez ces noms et cette arborescence afin que les chemins restent cohérents avec les pages à construire.

Le chemin utilisé dans l’application part de public, mais ne contient pas le nom de ce dossier. Le fichier public/images/foret.jpg correspond donc au chemin public /images/foret.jpg, et le fichier montagne à /images/montagne.jpg. Ce sont ces chemins que vous associerez aux objets d’itinéraire, et non des chemins de votre ordinateur comme /Users/vous/Downloads/foret.jpg.

Installer et vérifier les fichiers

Si les deux fichiers sont déjà présents dans le projet, vérifiez simplement leur nom et leur emplacement. Si vous disposez des originaux dans votre dossier de téléchargements, copiez-les dans le dossier cible en conservant les extensions et les noms attendus. Depuis la racine du projet, les commandes suivantes montrent une méthode possible lorsque les fichiers source portent ces noms :

mkdir -p public/images
cp ~/Téléchargements/foret.jpg public/images/foret.jpg
cp ~/Téléchargements/montagne.jpg public/images/montagne.jpg
ls -lh public/images

foret.jpg
montagne.jpg

Adaptez uniquement le chemin source des commandes si vos fichiers sont rangés ailleurs. La commande ls doit ensuite indiquer les deux fichiers dans public/images ; si elle signale qu’un fichier est introuvable, vérifiez le nom, les majuscules et l’extension. Un nom comme Foret.JPG n’est pas le même que foret.jpg sur tous les environnements. Une fois les fichiers vérifiés, l’application peut les associer aux itinéraires avec ces références :

Choisir des visuels cohérents

Associez le visuel forêt à l’itinéraire dont le slug est foret, et le visuel montagne à celui dont le slug est montagne. Le nom du fichier reste une décision d’organisation des ressources ; le lien avec une randonnée est établi par le chemin que vous enregistrerez dans ses données locales. Choisissez des images adaptées au sujet réel de chaque itinéraire, avec un cadrage lisible et une résolution suffisante pour l’affichage prévu.

À ce stade, vous préparez uniquement les fichiers et leurs chemins. Les pages du catalogue ne changent pas encore : la leçon suivante utilisera le composant d’image de Next.js et définira les propriétés nécessaires à son affichage. Vous avez déjà étudié la structure des routes et le modèle local des itinéraires dans les leçons précédentes ; réutilisez-les sans créer de nouveau dossier de route ni de feuille de style.

À retenir

• Rangez les images locales sous `public/images`, en respectant les noms `foret.jpg` et `montagne.jpg`.
• Retirez `public` du chemin utilisé par l’application : le fichier forêt se référence avec `/images/foret.jpg`.
• Associez chaque chemin à l’itinéraire correspondant et vérifiez la présence exacte des fichiers.
• L’affichage avec le composant d’image sera traité dans la prochaine leçon.