HTMLの相対パス
localhostにWebサイトを作成しています。私のウェブサイト内のすべてのリンクリソースを相対パスにしたい（内部リソースのみを意味する）。
ウェブサイトは
http://localhost/mywebsite
この便利な質問 絶対URLと相対URL を読みました。
/images/example.pngとimages/example.pngの違いを見つけました
<a href="/images/example.png"> Link To Image</a>
上記の相対パスは、URLの最初にROOT_DOCUMENT/images/example.pngがあるため、/を返す必要があります。 ROOT_DOCUMENTは/wamp/www/mywebsiteのようなものであるため
しかし、私がそれをテストしたとき、それは/wamp/www/images/example.pngのみを返します
そして、ウェブサイトフォルダー/mywebsite/images/example.pngを相対パスに手動で追加する必要があります。
<a href="mywebsite/images/example.png"> Link To Image</a>
また、mywebsiteの名前を変更するため、役に立たない。そう：
- なぜこの問題が発生するのですか？
- この問題を解決するにはどうすればよいですか？
あなたはあなたのウェブサイトがhttp://localhost/mywebsiteにあると言い、あなたの画像がpictures/という名前のサブフォルダーの中にあるとしましょう：
絶対パス
絶対パスを使用する場合、/はsiteのrootを指し、ドキュメントのルートではありません：localhostあなたの場合。そのため、ピクチャフォルダにアクセスするには、ドキュメントのフォルダを指定する必要があります。
"/mywebsite/pictures/picture.png"
そして、それは次のようになります：
"http://localhost/mywebsite/pictures/picture.png"
相対パス
相対パスは、ドキュメントのルートに対して常にrelativeであるため、HTMLディレクトリの同じレベルで、画像のディレクトリ名で直接パスを開始する必要があります：
"pictures/picture.png"
しかし、相対パスを持つ他の特典があります：
ドットスラッシュ（./）
Dot（.）は同じディレクトリを指し、スラッシュ（--- /）アクセスを与えます：
したがって、この：
"pictures/picture.png"
これと同じになります：
"./pictures/picture.png"
二重ドットスラッシュ（../）
この場合、二重ドット（..）は上部ディレクトリを指し、同様にスラッシュ（/ =）アクセスできます。したがって、ドキュメントの現在のディレクトリの1レベル上のディレクトリにある画像にアクセスする場合、URLは次のようになります。
"../picture.png"
あなたは好きなだけそれらをいじることができます、小さな例はこれでしょう：
ディレクトリAにいて、ディレクトリXにアクセスしたいとします。
- root
|- a
|- A
|- b
|- x
|- X
URLは次のいずれかになります。
絶対パス
"/x/X/picture.png"
または：
相対パス
"./../x/X/picture.png"
これを純粋なHTMLで解決する最も簡単な方法は、 <base href="…"> 次のような要素：
<base href="http://localhost/mywebsite/" />
HTML内のすべてのURLは次のようになります。
<a href="/images/example.png">Link To Image</a>
<base href="…">サーバーに一致します。残りのHTMLパスは単に行に収まり、それに追加されます。
相対パスは、クライアント側のドキュメントレベル、つまりブラウザで表示されるドキュメントのURLレベルに基づいています。
ウェブサイトのURLが次の場合：http://www.example.com/mywebsite/その後、ルートレベルから開始します上記「mywebsite」フォルダパス。