imageのpathについて

Question

Reactでimageの指定をしています。

// App.js
const App = () => {
  const logo = "/images/logo.png";
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

public配下にimagesフォルダを作りその下の画像を読み込ませています。
この時

①/images/logo.pngだと読み込まれます。
②images/logo.pngでも読み込まれます。
③../images/logo.pngでも読み込まれます。
④hogehoge/../../../images/logo.pngでも読み込まれます。(hogehogeなんてフォルダは無い)
⑤public/images/logo.pngだと読み込まれません。
⑥/public/images/logo.pngでも読み込まれません。

質問１ 相対パスとルートパスの理解が甘くよくわかっていませんが
①はサイトルートパス
②は相対パス
③も相対パス
④も相対パス
⑤も相対パス
⑥はサイトルートパス
という認識であっているでしょうか？

質問２ Reactのドキュメントルートはどこになるのでしょうか？
質問３ ③、④はなぜ読み込まれるのでしょうか？

よろしくお願いいたします。

Answer 1

質問1…こちらURLスタンダードの表記では以下です。

① パス絶対URL
② パス相対URL
③ パス相対URL
④ パス相対URL
⑤ パス相対URL
⑥ パス絶対URL

ただ、「サイトルートパス」や「相対パス」という言い方も現場ではしますので、提示した表現も正しいと言えば正しいです。

質問2について：
提示いただいた情報からはドキュメントルート（サーバー上のパス名）は分かりません

質問3について：
ルート / から更に親ディレクトリ ../ を求めてもルート / が示されます。①と②から、現在ルート直下のドキュメントを参照していることがわかりますから、そこから更に親ディレクトリを求めてもルート / になります。なので、③でも読み込みされることになります。
④については、いったん/hogehogeに相対移動した後、../../../ が続いていますから3段階親ディレクトリに遡るわけですが、現実には1段階親ディレクトリにさかのぼった段階でルート / に到達し、その後の ../../ は単に無視されます。なので、最終的なパスは/images/logo.png になります。

Comments

[hello_space]

ルートディレクトリとドキュメントルートは違うものということですよね？同じものだと勘違いしていました。

[ockeghem]

はい。ドキュメントルートは、サーバー上のディレクトリのことですので、URL上は現れません。