Je suis actuellement en train de faire le routing de mon projet Nuxt et j’ai eu quelques problèmes en voulant « nest » certains dossiers pour faire un routing qui ressemble à ça : « /PageAccueil/PricingPage/Checkout123 ».
Problème, quand j’essaye de mettre mon dossier « PricingPage » dans mon dossier PageAccueil et qu’ensuite j’essaye de mettre le file Checkou123.vue dans celui-ci, toutes les images placées dans ma component ne s’affichent plus. Je reçois une erreur 404 dans ma console, qui me dit que l’image est introuvable, pourtant le path est correct.
Par contre, je n’ai pas cette erreur quand j’utilise une image sur Google parce que Nuxt arrive à retrouver l’image. Mais je pense qu’il n’arrive pas à retrouver les images sur ma machine locale.
Est-ce que quelqu’un aurait une idée de la cause de ce problème ? Pour info, j’utilise Nuxt 3.
Salut Renaud ! Je suis ravi de t’aider avec ton problème de routing dans ton projet Nuxt. Apparemment, le souci principal vient du fait que les images locales ne s’affichent pas correctement lorsque tu imbriques les dossiers.
Pour régler ce problème, je te conseille de vérifier et ajuster les chemins relatifs de tes images. Voici quelques points à garder en tête :
Assure-toi d’utiliser le bon préfixe pour les chemins relatifs. Dans Nuxt, tu devrais utiliser le préfixe ~/ pour faire référence à la racine du projet. Par exemple, si ton image se trouve dans le dossier assets, le chemin devrait ressembler à ça : ~/assets/mon-image.jpg.
Si tu utilises des images dynamiques, il se peut que tu doives ajuster les chemins en conséquence. Par exemple, si tu utilises une boucle v-for pour afficher plusieurs images, vérifie que le chemin est bien formé en utilisant l’interpolation : <img :src="~/assets/${monImage}" />.
Enfin, n’oublie pas que les chemins des images doivent être adaptés en fonction de la structure de ton projet. Si tu as imbriqué les dossiers comme tu l’as mentionné, les chemins devraient être ajustés en conséquence.
Si après avoir vérifié ces points, tu rencontres toujours des problèmes, n’hésite pas à me fournir plus d’informations sur la structure de ton projet et les chemins que tu utilises pour les images. Je serais ravi de t’aider à trouver une solution. Bon courage !
Et ton image est où exactement? Tous tes assets statiques (images, fonts, etc) doivent être dans /public.
Quand tu fais <img src="/img.png" /> ça réfère à /public/img.png.
Par contre, si tu n’as pas de / au début et que tu marques simplement <img src="img.png" />, ça indique à ton navigateur d’aller chercher l’image dans le chemin actuel de ta page et non à partir de la racine (/public).
