#WindowsでHTMLのパス指定をする際の落とし穴
とかなんとか言っていますが、結果的に見るとこれは僕の凡ミスです。
一応メモとして今回のミスを書き残しておきます。
#今回のミス
今回躓いたのは、WindowsでHTMLコードを書いているときのパス指定です。
imgタグを使う時にファイルをパス指定して表示させようと思っていたのですが、うまく表示されず小一時間悩みました。
パス指定で躓く大きな理由はおそらく３つ挙げられると思います。
① コードのシンタックスエラー
② パスを間違えている
③ ファイル名を間違えている
この３つです。
大体②で躓いて困ることがあるかと思うのですが、今回は③でつまづきました。
その原因は、WindowsとMacでファイル名を変更する際のマナーが異なっていたからでした。
詳しい話をしていきましょう。
#ファイル名を変更する際のマナー
##Macの場合
Macでは、ファイル名は基本的に拡張子まで表示され(例外はありますが)、変更する際には拡張子まで指定して変更することができます。
例えば、
Sample.jpg
を
example.png
に変更する際には、拡張子までファイル名を書き換えてしまえば、拡張子を変更することができます。
##Windowsの場合
Windowsでは、ファイル名は拡張子まで表示されないことがあり、変更する際には拡張子までファイル名で変更してかいても実際に拡張子を変更することができません。
例えば、JPG形式の
Sample
を
example.png
に変更してもPNG形式に変更することはできません。ファイル名が「example.png」のJPG形式のファイルに変更されてしまいます。
なので、もし
<img src="./img/example.png">
と書いてもexample.pngを呼び出すことはできません。
仮に、Sampleという名前の元のファイルを画像ファイルとして呼び出したいときには、
<img src="./img/Sample">
ではなく、
<img src="./img/Sample.png">
と表記することで呼び出せます。