Q&A
「てらっちょ 模写」フォルダと、「teraccho-images」フォルダの位置関係を教えてください。
<imgタグ及びbackground-image プロパティで画像が表示されない＞
htmlやcssを学んで3か月ほどになる者です。
久々にvscodeを使って、あるサイトの模写をしていたのですが、画像(img)及び背景画像が表示されず、困っています。
上の写真が、フォルダ構成含むhtmlのコードで、次の写真が、scssでのコードです。
検証すると、どちらともFailed to load resource: net::ERR_FILE_NOT_FOUNDと出てきます。
下の方の写真でbackground-imageが利かないのは、css（scss）のファイルをcssフォルダに入れていないからでしょうか・・？
ですが、それだと、なぜ上の方の写真での、index.htmlにおける、imgさえ表示されないのが良くわかりません。
試したこと
他のエディタで基本的にこれまで作業してきて、画像が表示されないというのは何回かあって、そのたびに調べると、原因が相対パスや絶対パスが出来ていない等で、発見できて
解決できて来たのですが、今回この課題は解決できそうでいて、まったく解決できず困っています。
何が原因なのか明確に述べてくださると助かります。よろしくお願いします…。
恐らく、同じ階層に存在していると思います。
同じ階層にあるのであれば、相対パスが間違っていませんか？ ..で一つ上の階層に戻る必要があるのでは。
画像はteratailの添付機能を利用してご提示ください。
あと、ファイルの位置関係が分かる情報をご提示ください。
あ、ただ、コードを画像で提示されても誰も現象確認できないので、テキストでマークダウンのcode機能を利用してご提示ください
..も一応確認しましたが、やはり修正できませんでした。
@m.ts10806 さん
すみません、初めてこのサイトを利用しているので、使い方がまだよくわかっていなくて…。
ファイルの位置関係が分かる情報とはどう提示すればよろしいでしょうか。
同じ階層です。
> ..も一応確認しましたが、やはり修正できませんでした
では、同一階層にないのでしょう。または、回答に書いたように、Live Server で開いているとか。
いずれにせよ、フォルダ構成の見直しをお勧めします。
今、確認してみましたが、プレビューでもダメそうです。
open follder をクリックして、新しいフォルダを作り、名前を、「てらっちょ模写」 とした。
⇩
そしてそのフォルダ内で新しいファイルを作り、index.htmlとした。
⇩
add folder to workspace から、terattyo-images フォルダをクリックし追加した。
文だけなので、言いたいことが伝わり切れているのか微妙なのですが、この上の流れでフォルダやファイルを作りました。何か引っかかるようなところはありますでしょうか。
回答と、そのコメント欄に書いた通りなのですが、不明な点は何ですか？
live serverは使っていません。
そして、「「てらっちょ 模写」フォルダの下に「terattyo-images」フォルダを置くなど、フォルダ構成を見直してください。」というのは、上に書いた、
「open folderをクリックして～」という手順ではできていないのでしょうか。
意地悪をして、質問に質問を返しているわけではないので、気を悪くしないでほしいのですが……
おそらく、私の回答で理解できていない部分があるのではないかと思うんです。
とりあえず、回答のコメントに書いた、「..を加えた状態で、エクスプローラからのダブルクリックで開いてみてもいいかもしれませんね。」は試してみましたか？
> そして、「「てらっちょ 模写」フォルダの下に「terattyo-images」フォルダを置くなど、フォルダ構成を見直してください。」というのは、上に書いた、
「open folderをクリックして～」という手順ではできていないのでしょうか。
はい！まさにその通りです。
それはルートフォルダを増やしただけです。
あ、何が理解できていないか、わかったかもしれません。
「てらっちょ 模写」フォルダの下に
の
「下」
をワークスペース一覧の下、という意味でとらえていませんか？
そうではなくて、「てらっちょ 模写」フォルダの「中」という意味で「下」という言葉を使いました。
分かりにくい表現で失礼しました。
../を加えてダブルクリックで試してみているのですが、やはりうまくいきません…。
【「てらっちょ 模写」フォルダの下に「terattyo-images」フォルダを置く】とは、具体的にどこをクリックすればよろしいのでしょうか・・？
open follder をクリックして、新しいフォルダを作り、名前を、「てらっちょ模写」 とした。
⇩
そしてそのフォルダ内で新しいファイルを作り、index.htmlとした。
⇩
add folder to workspace から、terattyo-images フォルダをクリックし追加した。
この手順でいう、最後の部分がダメなのでしょうか。
VSCodeユーザーではないので見づらいですねこれ…。エクスプローラのほうがありがたいかもしれません。
あと、コードはテキストでよろしくお願いしますね。こちらで現象確認できません。
> ダブルクリックで試してみている
これがVSCodeではなくて、エクスプローラから開いてもダメであれば、同一の階層にないのかもしれませんね。
> 具体的にどこをクリックすればよろしいのでしょうか
「てらっちょ 模写」の横にあるフォルダ型に+が書かれたアイコンです。
https://stackoverflow.com/questions/48384935/drag-and-drop-creating-new-folder-in-project-root-folder-in-visual-studio-code
@m.ts10806 さん
お時間割いていただいてすみません、何とか解決することが出来ました。ありががとうございました!
回答1件
0
ベストアンサー
こんばんは。
「てらっちょ 模写」フォルダと、「terattyo-images」フォルダが、同一階層にあるならば、以下のようにしてみてはいかがですか？
html
1<img src="../terattyo-images/01-4.jpg" alt="">
ただし、Live Server を使っている場合にはルートフォルダの外になってしまうためこれでは対応できません。
その場合には、「てらっちょ 模写」フォルダの下に「terattyo-images」フォルダを置くなど、フォルダ構成を見直してください。
（そのフォルダ構成であれば、もともとのパスで表示されるはずです
また、VSCodeのワークスペースについて理解が不足しているようにも見えますから、必要に応じて理解を深められた方がいいかもしれません。
参考：
ワークスペースは、複数ルートのフォルダーを同時に開く機能です。（……）もちろんルートフォルダーは、それぞれ異なるパスに配置してあっても問題ありません。
VS Codeのワークスペース - Qiita
投稿2020/09/05 08:52
総合スコア37699
../ともやってみましたが、上手くいきません…。
補足欄のコメントをまとめて転写します。
では、同一階層にないのでしょう。または、回答に書いたように、Live Server で開いているとか。
プレビュー機能でもダメそうです。
いずれにせよ、フォルダ構成の見直しをお勧めします。
HTMLファイルは、どのようにして開いていますか？
試しに、..を加えた状態で、エクスプローラからのダブルクリックで開いてみてもいいかもしれませんね。
送ってもらったurlを参考にnew follderを作成したのちもう一度作ってみたところ、上手くいきました!
add folder to workspaceで、フォルダを追加できたと思うのではダメで、new-folderをクリックし、作る事で、適切に同じ階層に持ってくることが出来、無事に、../とすることで画像が表示されて解決できたと思います。
https://gyazo.com/d634d67a3fe29003912bd5d0de2bca3d
お時間を割いていただいてありがとうございました。頑張ります。
VSCodeの「フォルダーをワークスペースに追加(add folder to workspace)」は、「別の場所にあるフォルダー(複数可)を、現在のワークスペース(VSCodeでファイルが一覧表示される作業場所)に追加する」という機能です。(複数のフォルダーを追加した状態の)ワークスペースは、物理的なフォルダーの構造を反映しているわけではなく、選択したフォルダーが、それまでワークスペースで表示していたフォルダーの下に移動してくるわけではありません。
@Dargedaさん
細かな説明ありがとうございます!
そこを完全に誤解していたために、いつまでも画像を表示することが出来ませんでした。
new folder作成する事で、適切なフォルダ構造として作成していく事が出来るんですね。
これからも頑張っていきます。
あなたの回答
tips
プレビュー
