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

101

Je stocke des feuilles de style dans {root} / styles tandis que des images dans {root} / images pour un site Web. Comment 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');

html css relative-path

— aateeque
source

184

Utilisez ..pour indiquer le répertoire parent:

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

— seul jour
source

J'ai lu ça ailleurs aussi - mais ça ne marche pas! (au moins dans Chrome)

— aateeque

27

Cela fait. Cependant, notez que l'emplacement est relatif à l'emplacement du fichier CSS, et non au document incorporant le fichier CSS.

— ThiefMaster

1

@ThiefMaster Cela devrait être le cas si nous n'utilisons que du CSS en ligne

— 1000 Gbps

58

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

En commençant par / retourne au répertoire racine et commence là
Commencer par ../ déplace un répertoire vers l'arrière et commence là
Commencer par ../../ déplace deux répertoires vers l'arrière et commence là (et ainsi de suite ...)
Pour avancer , commencez simplement par le premier sous-répertoire et continuez à avancer.

Cliquez ici pour plus de détails!

— S.Akruwala
source

52

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 exemple ../images/../images/../images/(comme ../images/bien sûr)

— ThiefMaster
source

9

Dans Chrome, lorsque vous chargez un site Web à partir d'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 du système de fichiers local, vous ne pouvez pas accéder aux répertoires au-dessus du répertoire actuel. C'est à dire que vous ne pouvez pas accéder ../something/something.sthet changer le chemin relatif en absolu ou quoi que ce soit d'autre n'aidera pas.

— jaboja
source

1

Lors de la revérification, je peux signaler que les chemins relatifs du système de fichiers local en utilisant ../fonctionnent correctement - ou du moins fonctionnent correctement dans ce cas spécifique!

— aateeque

1

Cela fonctionne sur Linux et Windows, pas sur Mac (mon expérience)

— gabn88

Les liens ne comptent pas ici, car il n'y a pas la même vérification d'origine pour eux. De plus, cette réponse a 6 ans, donc les navigateurs peuvent avoir beaucoup changé.

— jaboja

1

Je confirme juste pour quiconque consulte la réponse

— Ajay

0

Supposons que vous ayez la structure de fichiers suivante:

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

En CSS, vous pouvez accéder image1, par exemple, en utilisant la ligne ../images/image1.png.

REMARQUE : 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 j'ai simplement supprimé l'historique complet du cache de Chrome et cela a fonctionné.

— A.Tressos
source

0

Si vous stockez des feuilles de style / images dans un dossier afin que plusieurs sites Web puissent les utiliser, ou que vous souhaitez réutiliser les mêmes fichiers sur un autre site sur le même serveur, j'ai constaté que mon navigateur / Apache ne me permet pas d'accéder à tout dossier parent au-dessus de l'URL racine du site Web. Cela semble évident pour des raisons de sécurité - il ne faut pas pouvoir naviguer sur le serveur ailleurs que dans les dossiers Web spécifiés.

Par exemple. ne fonctionne pas: www.mywebsite.com/../images

Pour contourner le problème, j'utilise des liens symboliques:

Accédez au répertoire de www.mywebsite.com Exécutez la commande ln -s ../images images

Désormais, www.mywebsite.com/images pointe vers www.mywebsite.com/../images

— Leendert
source