web-dev-qa-db-fra.com

Comment remonter d'un niveau dans le chemin src d'une URL en HTML?

Je stocke les feuilles de style dans {root}/styles tandis que les images dans {root}/images pour un site Web Comment puis-je donner le chemin dans les feuilles de style pour aller chercher dans le répertoire images les images spécifiées?

par exemple. Dans background-image: url('/images/bg.png'); 

htmlcssrelative-path
88
aateeque

Utilisez .. pour indiquer le répertoire parent:

background-image: url('../images/bg.png');
157
lonesomeday

Utilisez ../:

background-image: url('../images/bg.png');

Vous pouvez l’utiliser aussi souvent que vous le souhaitez, par exemple ../../images/ ou même à différentes positions, par ex. ../images/../images/../images/ (identique à ../images/ bien sûr)

47
ThiefMaster

Voici tout ce que vous devez savoir sur les chemins de fichiers relatifs:

  • À partir de/ retourne au répertoire racine et y commence

  • À partir de../ déplace un répertoire en arrière et commence à cet endroit

  • Commencer par../../ déplace deux répertoires en arrière et commence par là (et ainsi de suite ...)

  • Pour avancer, commencez par le premier sous-répertoire et continuez d'avancer.

Cliquez ici pour plus de détails!

35
S.Akruwala

Dans Chrome, lorsque vous chargez un site Web depuis un serveur HTTP, les chemins absolus (par exemple, /images/sth.png) et les chemins relatifs vers un répertoire de niveau supérieur (par exemple, ../images/sth.png) fonctionnent.

Mais!

Lorsque vous chargez (dans Chrome!) Un document HTML à partir d'un système de fichiers local, vous ne pouvez pas accéder aux répertoires situés au-dessus du répertoire actuel. C'est à dire. vous ne pouvez pas accéder à ../something/something.sth et changer le chemin relatif en absolu ou quoi que ce soit d'autre ne vous aidera pas.

8
jaboja

En supposant que vous ayez la structure de fichier suivante:

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

En CSS, vous pouvez accéder à image1, par exemple, à l'aide de la ligne ../images/image1.png.

NOTE: Si vous utilisez Chrome, cela peut ne pas fonctionner et vous obtiendrez une erreur indiquant que le fichier est introuvable. J'ai eu le même problème, alors je viens de supprimer l'intégralité de l'historique du cache de chrome et cela a fonctionné.

0
A.Tressos