web-dev-qa-db-fra.com

Chemin relatif en HTML

Je crée un site Web sur localhost. Je veux créer toutes les ressources de lien de mon site Web vers un chemin relatif (je veux dire uniquement les ressources internes).

site Web est situé dans

http://localhost/mywebsite

J'ai lu cette question utile RL absolues vs URL relatives .

J'ai trouvé des différences entre /images/example.png et images/example.png

<a href="/images/example.png"> Link To Image</a>

Le chemin relatif ci-dessus doit renvoyer ROOT_DOCUMENT/images/example.png à cause de / au début de l'URL. Comme ROOT_DOCUMENT est quelque chose comme /wamp/www/mywebsite

Mais quand je l'ai testé, il ne renvoie que /wamp/www/images/example.png

Et je devrais ajouter manuellement le dossier de mon site Web /mywebsite/images/example.png au chemin relatif.

<a href="mywebsite/images/example.png"> Link To Image</a>

Et ce n'est pas utile en raison du changement de nom de mon site Web. Alors:

  • Pourquoi ce problème se produit-il?
  • Comment puis-je résoudre ce problème?
htmlrelative-pathrelative-url
27
Amir

Vous dites que votre site Web est en http://localhost/mywebsite, et disons que votre image se trouve dans un sous-dossier nommé pictures/:

Chemin absol

Si vous utilisez un chemin absol, / pointerait vers le racine du site, pas la racine du document: localhost dans votre cas. C'est pourquoi vous devez spécifier le dossier de votre document afin d'accéder au dossier images:

"/mywebsite/pictures/picture.png"

Et ce serait la même chose que:

"http://localhost/mywebsite/pictures/picture.png"

Chemin relatif

Un chemin relatif est toujours relatif au racine du document =, donc si votre html est au même niveau du répertoire, vous devrez démarrer le chemin directement avec le nom du répertoire de votre image:

"pictures/picture.png"

Mais il existe d'autres avantages avec des chemins relatifs:

barre oblique (./)

Point (.) pointe vers le même répertoire et la barre oblique (/) lui donne accès :

Donc ça:

"pictures/picture.png"

Serait le même que celui-ci:

"./pictures/picture.png"

barre oblique double (../)

Dans ce cas, un double point (..) pointe vers le répertoire supérieur et de même, la barre oblique (/) vous donne accès à celui-ci. Donc, si vous vouliez accéder à une image qui se trouve dans un répertoire un niveau au-dessus du répertoire actuel de votre document, votre URL ressemblerait à ceci:

"../picture.png"

Vous pouvez jouer avec eux autant que vous le souhaitez, un petit exemple serait le suivant:

Disons que vous êtes dans le répertoire A, et que vous souhaitez accéder au répertoire X.

- root
   |- a
      |- A
   |- b
   |- x
      |- X

Votre URL ressemblerait soit:

Chemin absol

"/x/X/picture.png"

Ou:

Chemin relatif

"./../x/X/picture.png"
48
arielnmz

La façon la plus simple de résoudre ce problème en HTML pur consiste à utiliser le <base href="…"> élément comme ceci:

<base href="http://localhost/mywebsite/" />

Ensuite, toutes les URL de votre code HTML peuvent être les suivantes:

<a href="/images/example.png">Link To Image</a>

Changez simplement le <base href="…"> pour correspondre à votre serveur. Le reste des chemins HTML tombera juste en ligne et sera ajouté à cela.

27
JakeGould

Le cheminement relatif est basé sur le niveau du document côté client, c'est-à-dire le niveau URL du document tel qu'il apparaît dans le navigateur.

Si l'URL de votre site Web est: http://www.example.com/mywebsite/ puis en commençant au niveau racine commence ci-dessus le chemin du dossier "mon site web".

3
madamission