IT Programming

相対パスを使った読み込み方を解説!【パターン別に解説します】

 

写真,画像

 

相対パスを使ったファイルの読み込み方法ってよくわからないですよね。

 

この記事では、相対パスを使ってファイルを読み込む方法をお伝えします。

 

結論:同じ階層ならそのまま指定して、上の階層なら../でたどって、下の階層ならフォルダ名でたどって画像を読み込む

なんのこっちゃですよね笑

詳しく説明していきます。

 

今回は、相対パスを使って画像ファイルを読み込んでいきます。

 

相対パスの説明,画像

今こういう階層構造だとします。

 

つまり、「space.jpg」のひとつ上の階層には「相対パスフォルダ1」、「fish.jpg」、「index.html」があり、さらにその上の階層には「相対パス2フォルダ」と「child.jpg」がある状況だとします。

 

今から画像を読み込んでいくのですが、画像を読み込むときは、

読み込もうとしているhtmlファイルが基準になること

を頭に入れてください。

 

要するに画像を読み取るコードを今まさに書いているhtmlファイルです。

これが基準となることをおぼえてください。

この場合index.htmlです。

 

相対パスの説明,画像

 

 

では画像を読み込んでいきましょう。

 

まず最初はfish.jpgを読み込んでいきいます。

 

相対パスの説明,画像

 

基準のindex.htmlから見たらfish.jpgは同じ階層にありますよね。

そのときはそのままfish.jpgを指定します。

 

なので、<img src="fish.jpg">とコードを書けばOKです。

相対パスの説明,画像

 

ブラウザで確認してみます。

 

相対パスの説明,画像

 

OKです!ちゃんとfish.jpgが読み取れましたね!

次にchild.jpgを読み込んでいきましょう

 

相対パスの説明,画像

 

child.jpgは一個上の階層にありますね。

そのときは../でたどってchild.jpgを指定します。

 

つまり、

<img src="../child.jpg">

と書けばOKです。

相対パスの説明,画像

ブラウザで確認しましょう。

 

相対パスの説明,画像

 

わっしょい\(^o^)/

 

最後にspace.jpgを読み込んでいきましょう。

 

相対パスの説明,画像

 

一個下の階層にspace.jpgがありますね。

下の階層にあるときはフォルダ名を指定してたどります。

 

<img src="相対パス1/space.jpg">

これでいいはず。(´・ω・`)

 

相対パスの説明,画像

 

確認します。

 

相対パスの説明,画像

 

d(*´▽`*)b ベリーグッチョ♪

 

相対パスでの読み取り方は、どこが基準かが大事

相対パスを使ったファイル読み取り方ってよくわからないですよね。

最初ぼくは「なんで読み取れへんのだ!!」と苦戦して、めっちゃいらだってました笑。

 

「同じ階層ならそのまま指定
上の階層なら../でたどる
下の階層ならフォルダ名でたどる」

 

これを覚えておきましょう♪

 

それでは以上になります。


スポンサードリンク

-IT, Programming

© Copyright March/2020 タクミ