Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
前提・実現したいこと
ディレクトリ構造が違うところにある画像を挿入したときに、「../」や「フォルダ名/ファイル名.jpg」と使っているのに、画像が貼り付けることができません。それを直したいのです。
発生している問題・エラーメッセージ
画像が貼り付けることができない
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>リンクをつなげる</title> </head> <body> <img src="../IMG_0066.jpg" alt="サボテン" Width="460" height="300"> <h1>目次</h1></body> </html> ### 試したこと<ul> <ol> <a href="egatyanneru.html"> <li><a href="egatyanneru.html">挨拶</a></li> </a> <a href="zanntetuken.html"><li>好きなこと</li></a> </ol> </ul>
ディレクトリ構造が同じものであるとうまく貼り付けることができるんですが、ディレクトリ構造を「ずらす」と途端にできなくなりますなぜ。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
ディレクトリ構造（ファイルの置き場所）を、キャプチャでもいいので、質問文に記載して下さい。
質問はわからんけど、<p><img src="../IMG_0066.jpg" alt="サボテン" Width="460" height="300"></p>
もうずっと書いてないけど<p></p>で＜img src..をくくるものなのですか？。
回答3件
0
「画像を挿入する」「画像を張り付ける」ではなく「プログラムで画像を参照する」という考え方にしたほうが良いかと思います。
imgタグなどで参照するわけですが、そのimgタグの書かれているプログラムから見た位置を「パス」として書きます。
example.png ./example.png はいずれも「プログラムと同じ階層」です。
../とすると1組につき1階層「上」を参照します。
../example.pngで1つ上の階層のexample.png
../../example.pngで2つ上の階層のexample.png
../test/example.pngで1つ上の階層のtestディレクトリの配下のexample.png
といった感じです。
../IMG_0066.jpgという記述なら
「HTMLの1つ上の階層に置いてあるIMG_0066.jpg」になります。
┌hoge ─ example.html ├IMG_0066.jpg
「今参照を書きたいプログラムはどこにあって、参照したいファイルはどこにあるか」を確認してください。
投稿2020/10/07 05:13
編集2020/10/07 05:13総合スコア80875
0
ディレクトリ構造を「ずらす」と途端にできなくなりますなぜ。
何が疑問なのかわかりません。../のような相対パスによる参照は、「ディレクトリ構造」に沿ってファイルを探します。
投稿2020/10/07 01:52
総合スコア146018
初心者なのでどうもすみません。コードを打っているファイルと取り込みたい画像のファイルが、ディレクトリ構造で同じだとうまく画像を挿入できるんです。画像のファイルを１つ上のディレクトリ構造にあるファイルだと、相対パスなので「../」とテキスト通りにしてもうまくいかないのはなぜなのかと疑問なんです。
意図したとおりにファイルが置けていない可能性もあります。HTMLと画像ファイルのフルパスを書いていただけないでしょうか？
どうも初心者ですみません。フルパスをよく理解していないために…。意図した通りにファイルが置けていないとはどういうことでしょうか？
> 意図した通りにファイルが置けていないとはどういうことでしょうか？
書いてのとおりです。ファイルの置き方を間違えていて「../」で参照できない、ということが考えられます。
（フルパスがわからない人に説明できるだけの能力は自分にはないかもしれませんので、あらかじめお断りしておきます）
フルパスって、絶対パスのことでしょうか？
こういう記事を一度読まれたほうが良いかと。
https://webliker.info/78726/
質問の回答とはちよっと違いますが、<p><img src="../IMG_0066.jpg" alt="サボテン" Width="460" height="300"></p>
もうずっと書いてないけど<p></p>で＜img src..をくくるものなのですか？私は、知りませんけど。
0
自己解決が出来ました。
私のパソコンはマックです。
マックだとファイルを右クリックでコピー。置きたい場所で、編集をクリックして、「option」を押しながら「ここに項目を移動」を選ぶという方法を取りました。すると、画像が参照されるようになりました。
投稿2021/07/26 04:07
編集2021/07/26 04:31総合スコア8
正式なやり方を他の初心者に伝わるよう説明してください。
回答は編集できます。
全く伝わりません。今まで画像がなかったということですか？
> ディレクトリ構造が同じものであるとうまく貼り付けることができるんですが、
こちらの意味もわかりません。
その、一年近く放置して何をされてたんでしょう？
回答見た感じhtmlの話には見受けられません
あなたの回答
tips
プレビュー
