Q&A
> 絶対パスなら問題無く表示される
当方，素人ですが，
問題なく表示される絶対パスの例もあると話が分かりやすかったりしないのでしょうか？
（現在，バックスラッシュとスラッシュの話が出ている様子ですが，例えば「絶対パスならばバックスラッシュで問題が無い」みたいな話なのか否か？ みたいな？）
実現したいこと
指定のファイルを相対パスを使って表示させたいです。
発生している問題・分からないこと
絶対パスでは表示できるのに、相対パスにすると画像が表示できません。
こんな画像が表示されます。
該当のソースコード
HTML
1 <img src="..\aikatsu_47.jpg">
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
相対コードの書き方について書かれているサイトを10件あたりあさりましたが、何がいけないのかわかりません。
絶対パスで書き直したら問題無く表示されました。
補足
他の所も絶対パスなら問題無く表示されるのに、相対パスに書き直すと表示されません。
何か根本的な所で間違えてるのかもしれません。
webサーバにどう置いているのか
webサーバのルートはどこか
html にどうアクセスしているのか
（はたまたローカルにfile://でアクセスしているのか）
の情報があれば即座に正解がでてきたと思います
> 何か根本的な所で間違えてるのかもしれません。
上記の情報を隠すということはそういうこともあるかもしれないなあ、と感じました
ローカルにファイルで置いています。画像もHTMLファイルも同じファイルの中に纏められています。
回答3件
0
ベストアンサー
相対パスがうまくいかないのは、「相対パスとは、ある場所を起点にした指定方法である」ことを理解しきれてないのだと思います。「起点がどこであるかを意識することが重要である」ことが分かっていると「絶対パスで指定するとOKだが、相対パスで指定するとNG」というのは「起点の場所を誤解している」ことが明らかです（あるいはタイプミス）。
起点の場所は、HTMLの場合は簡単で「相対パスが記述されているHTMLファイルのあるディレクトリ」が起点です(※)。
そのHTMLファイルが、/some/place/DocumentRoot/foo/index.htmlなら、起点は/some/place/DocumentRoot/fooで、<img src="aikatsu_47.jpg">は/some/place/DocumentRoot/foo/aikatsu_47.jpgを表示します。<img src="..\aikatsu_47.jpg">は、..が「1つ上」を意味するので/some/place/DocumentRoot/aikatsu_47.jpgを表示します。
※：厳密に言うと変更可能ですが、説明略。
投稿2025/09/08 13:59
編集2025/09/08 14:01
総合スコア86424
画像を新規作成したファイルの中に入れたら解決しました！
元々両方ともHTML_CSSというファイルに入っていました。
HTML_CSSファイルの中に画像ファイルを作成し、その中にaikatsu_47.jpgを入れた所で記述し直すと解決しました！
もしかしたら一つ分下に考えてたのかもしれません。
0
<img src="..\aikatsu_47.jpg">
\はバックスラッシュじゃん。
こっちじゃなくて/のスラッシュでディレクトリを区切ってください。
……と、そんな簡単な話ではないのでしっかり解説します。
貴方はWindowsマシンを操り、テキストエディタでHTMLを作りました。
エクスプローラーというファイラで作ったHTMLファイルを、ChromeなどのWebブラウザアプリにドラッグアンドドロップで投げ込み表示したのだと推測します。
そう思った理由は、パソコンのファイルの置き場所を表すパスの区切り文字ですね。
- Windows: 基本的には円マーク
¥だが、文字コードの都合でバックスラッシュになったりする - Mac: スラッシュを使う
- Linux: スラッシュを使う
んで、世のWebサーバはHTTPリクエストを受け取って、ガチャガチャ解析して、HTTPレスポンスという結果を返すことが仕事になります。
つまりアプリを立ち上げたらそのまま一生放置するような運用になるってわけです。
だったらキーボードとマウスの操作を良い感じに待ち構えて、グラフィカルな画面表示なんて必要ありませんよね？
なので世のWebサーバはWindowsもMacもいらねえよ、Linuxで必要最低限のアプリだけ動かすわってなわけで、
Linuxマシンばかり、つまりパスの区切り文字は円やバックスラッシュではなく、スラッシュを使う必要があるのです。
Windowsマシンなのに、HTML上ではバックスラッシュが使えない、どうやって相対パスを使えばよいんだ！？
NginxやApacheなどのWebサーバーのアプリはWindows版も提供されてます。
これらのアプリは稼働すると、パソコン内の特定ディレクトリをルートとして、その中にあるHTMLファイルのパスを指定することで、
Webサーバ越しに作成したHTMLファイルを閲覧できるようになります。
Webの話になってきますが、URLのパスの区切り文字は/というルールがあります。
そもそもURLとして使える文字一覧にバックスラッシュはありませんし。
だからWebサーバ越しにHTMLファイルを確認するならば、URLのルールを守るためにバックスラッシュではなく、
スラッシュが使えるようになるよ！って話です。
また、Windows上でLinuxマシンを動かしちゃって、そのLinuxマシンでWebサーバ用のアプリを導入しちゃえば良いじゃんという発想があり、
「WSL」というワードで検索すればLinuxマシンを操ることが可能となります。
WSLを動かすためにはいくつか条件がありますが、
貴方のWindowsマシンがWSLが動くならこっちのがおすすめです。
LinuxマシンでWebサーバを稼働させる人間が多いってことは、知見も多く情報が出回っているってことですからね。
投稿2025/09/08 06:33
総合スコア21542
回答ありがとうございます！WSLを調べてみます！
仕様についてはその通りなのですが、バックスラッシュ（U+005C）で書いても、Windows,macOS問わず主要なプラウザではパス区切り扱いされるのが現状です
間違った話ではないのですが、質問者さんの状況を説明する回答ではないと思います
0
htmlファイルと同じ場所に画像を置いて、以下のようにした場合、画像は表示されますか？
<img src="aikatsu_47.jpg">
投稿2025/09/08 06:00
総合スコア84
<img src="aikatsu_47.jpg">と記述すると表示されます。
<img src="../aikatsu_47.jpg">
の場合はどうですか？
コピペしてみてもらえますか。
ダメでした。変わりません。
> <img src="aikatsu_47.jpg">と記述すると表示されます。
ということですから、相対パスの記述ミスということでしょう。 パスの「..」は1つ上のディレクトリを指すので、htmlファイルと同じ場所に画像があるのであれば、間違えているということです。同一階層をあえて記述するのであれば「./aikatsu_47.jpg」(ドット1つ)とすればいいでしょう。
aikatsu_47.jpg も相対パス表記ですから（HTMLファイルと同じディレクトリにaikatsu_47.jpgがある）、 <img src="aikatsu_47.jpg"> で問題ないかと思います。もしくは、<img src="./aikatsu_47.jpg"> という表記でもよいかと。
問題が再現するような２つのファイルの絶対パスを例示してもらえば話が早いのでは．
ファイルを一つ増やしたら解決しました！
色々教えてくださりありがとうございました！
あなたの回答
tips
プレビュー
