web-dev-qa-db-ja.com

HTMLでローカルリソースを適切に参照する方法

結局のところ、ローカルリソースを参照することは、一部の人にとっては摩擦点になります。私は、ローカルのリソース参照とそれらが意味するものへの標準的な答えを探しています。

これらの例を見てください、これらの参照パスの違いは何ですか？

  • <img src="myfile.png" />（先頭のスラッシュなし）
  • <img src="/myfile.png" />（先頭にスラッシュを付けます）
  • <img src="folder/myfile.png" />（先頭のスラッシュなし/サブフォルダー内）
  • <img src="/folder/myfile.png" />（先頭のスラッシュ付き/サブフォルダー内）
  • <img src="../folder/myfile.png" />（ドットと先頭のスラッシュ付き/サブフォルダー内）
htmlsrcref
48
Chase Florell
  • 先頭のスラッシュは、ブラウザにルートディレクトリから開始するように指示します。
  • 先頭にスラッシュがない場合は、現在のディレクトリから参照しています。
  • 先頭のスラッシュの前に2つのドットを追加すると、現在のディレクトリの親を参照していることになります。

次のフォルダー構造を取ります

demo folder structure

notice：

  • rOOTチェックマークは緑色、
  • 2番目のチェックマークはオレンジ、
  • 3番目のチェックマークは紫色で、
  • 4番目のチェックマークは黄色です

index.html.enファイルに次のマークアップを追加します

<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>

次に、2番目のサブフォルダーにあるindex.html.enファイルをロードすると
http://example.com/subfolder/subfolder/

これはあなたの出力になります

enter image description here

106
Chase Florell