Q&A
とりあえず、ソースコードを。
私の予測では、
本命 URLスキームを省略している
対抗 ディレクトリ構造が違っている
大穴 そもそも全く違うファイルを開いている
---
ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1
Visual Studio CodeのLive Serverを使いながらwebサイト作成したのですが、直接ＨＴＭＬファイルをブラウザソフトで開くと正常に表示されません。
Live Server経由だと正常に表示されます。
これは何が原因なのでしょうか？
教えていただけないでしょうか？
よろしくお願いします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="/style.css"> 8 <title>Document</title> 9</head> 10<body> 11 <header id="header" class="wrapper"> 12 <img src="/bicycle_site/img/logo.svg" alt=""> 13 <h1> 14 テキスト 15 </h1> 16 </header> 17</body> 18</html>
これだけですら、直接ＨＴＭＬファイルをブラウザで開いても、画像は表示されなくなりました。
テキストはちゃんと表示されるんですが。
他にもまだ不具合ある感じです。
最初の質問の所に、HTMLのソースコードだけ載せました。
HTMLのソースコードだけでも、HTMLファイルを直接ブラウザで表示させても、画像は表示されなくなりました。
Visual Studio Codeです。
https://teratail.com/tags/Visual+Studio+Code
>LIve Server
Live Serverです。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
細かいですが、大事です。
もちろん他者がコピペで再現できる情報の提示が最優先ですけどね。
質問は編集できます。
指摘された所は、編集で訂正しておきました。
回答1件
0
ベストアンサー
もし、「ブラウザにドロップ」で動作確認しようとしているなら、パスの指定の仕方が問題になります。
例えばURLがfile:///のように始まってるような形ですね。
/で始めるパスは「絶対パス」で「ルートからのパス」になります。
<link rel="stylesheet" href="/style.css"> <img src="/bicycle_site/img/logo.svg" alt="">
file:///における「ルート」はWindowsならC直下とかになると思います（どこにHTML置いてるかによるけど）
じゃあ「C直下に各ファイルを置くか」というのは非現実的な話なので、大抵は相対パスで書きます。
「HTMLファイルから見たパス」を書いてみてください。
例
├index.html ├style.css ├bicycle_site-img-logo.svg
なら
<link rel="stylesheet" href="./style.css">
<img src="./bicycle_site/img/logo.svg" alt="">
もしくは
<link rel="stylesheet" href="style.css">
<img src="bicycle_site/img/logo.svg" alt="">
投稿2021/02/16 10:33
総合スコア80890
教えてもらったように、パスの指定方法間違えていたみたいです。
初歩的なミスでした。
教えてくださって、ありがとうございます。
ローカルPCで確認するときは特に注意してください。
ローカルでもWebサーバー立てて確認するようにするとこの手のミスは減らせます。
解決したのでしたら、どこかでのタイミングで「解決済み」にしておいてください。
あなたの回答
tips
プレビュー
