59

結局のところ、ローカル リソースを参照することは、一部の人にとって問題になる可能性があります。ローカルリソース参照に対する標準的な回答と、その意味を探しています。

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

  • <img src="myfile.png" />(先頭のスラッシュなし)
  • <img src="/myfile.png" />(先頭のスラッシュ付き)
  • <img src="folder/myfile.png" />(先頭のスラッシュなし / サブフォルダー内)
  • <img src="/folder/myfile.png" />(先頭のスラッシュ付き / サブフォルダー内)
  • <img src="../folder/myfile.png" />(ドットと先頭のスラッシュ付き / サブフォルダー内)
4

1 に答える 1

120
  • 先頭のスラッシュは、ブラウザーにルート ディレクトリから開始するように指示します。
  • 先頭のスラッシュがない場合は、現在のディレクトリから参照しています。
  • 先頭のスラッシュの前に 2 つのドットを追加すると、現在のディレクトリの親を参照していることを意味します。

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

デモのフォルダ構造

知らせ：

  • 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 番目のサブフォルダーhttp://example.com/subfolder/subfolder/index.html.enにあるファイルをロードすると、

これが出力になります

ここに画像の説明を入力

于 2013-01-23T20:43:21.063 に答える