web-dev-qa-db-fra.com

Comment référencer correctement les ressources locales en HTML?

En fin de compte, le référencement des ressources locales peut constituer un problème pour certains. Je cherche une réponse canonique au référencement des ressources locales et à leur signification.

Prenons ces exemples, quelle est la différence entre ces chemins de référence?

  • <img src="myfile.png" /> (pas de barre oblique)
  • <img src="/myfile.png" /> (avec la barre oblique)
  • <img src="folder/myfile.png" /> _ (pas de barre oblique/sous-dossier)
  • <img src="/folder/myfile.png" /> (avec la barre oblique/dans le sous-dossier)
  • <img src="../folder/myfile.png" /> (avec des points et une barre oblique/dans le sous-dossier)
htmlsrcref
48
Chase Florell
  • Une barre oblique indique au navigateur de démarrer au répertoire racine.
  • Si vous n'avez pas la barre oblique, vous faites référence à partir du répertoire en cours.
  • Si vous ajoutez deux points avant la barre oblique, cela signifie que vous faites référence au parent du répertoire en cours.

Prenez la structure de dossier suivante

demo folder structure

remarque:

  • la coche ROOT est verte,
  • la deuxième coche est orange,
  • la troisième coche est violet,
  • la quatrième coche est jaune

Maintenant dans le index.html.en fichier, vous voulez mettre le balisage suivant

<p>
    <span>src="check_mark.png"</span>
    <img src="check_mark.png" />
    <span>I'm purple because I'm referenced from this current directory</span>
</p>

<p>
    <span>src="/check_mark.png"</span>
    <img src="/check_mark.png" />
    <span>I'm green because I'm referenced from the ROOT directory</span>
</p>

<p>
    <span>src="subfolder/check_mark.png"</span>
    <img src="subfolder/check_mark.png" />
    <span>I'm yellow because I'm referenced from the child of this current directory</span>
</p>

<p>
    <span>src="/subfolder/check_mark.png"</span>
    <img src="/subfolder/check_mark.png" />
    <span>I'm orange because I'm referenced from the child of the ROOT directory</span>
</p>

<p>
    <span>src="../subfolder/check_mark.png"</span>
    <img src="../subfolder/check_mark.png" />
    <span>I'm purple because I'm referenced from the parent of this current directory</span>
</p>

<p>
    <span>src="subfolder/subfolder/check_mark.png"</span>
    <img src="subfolder/subfolder/check_mark.png" />
    <span>I'm [broken] because there is no subfolder two children down from this current directory</span>
</p>

<p>
    <span>src="/subfolder/subfolder/check_mark.png"</span>
    <img src="/subfolder/subfolder/check_mark.png" />
    <span>I'm purple because I'm referenced two children down from the ROOT directory</span>
</p>

Maintenant, si vous chargez le index.html.en fichier situé dans le deuxième sous-dossier
http://example.com/subfolder/subfolder/

Ce sera votre sortie

enter image description here

106
Chase Florell