Visual Studio CodeのLive Serverを使いながらｗｅｂサイト作成したのですが、直接ＨＴＭＬファイルをブラウザソフトで開くと正常に表示されません。

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>

これだけですら、直接ＨＴＭＬファイルをブラウザで開いても、画像は表示されなくなりました。
テキストはちゃんと表示されるんですが。
他にもまだ不具合ある感じです。

Lhankor_Mhy

2021/02/16 09:01

とりあえず、ソースコードを。私の予測では、本命　URLスキームを省略している対抗　ディレクトリ構造が違っている大穴　そもそも全く違うファイルを開いている --- ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1

shinaozora50

2021/02/16 10:15

最初の質問の所に、HTMLのソースコードだけ載せました。 HTMLのソースコードだけでも、HTMLファイルを直接ブラウザで表示させても、画像は表示されなくなりました。

m.ts10806

2021/02/16 10:18

Visual Studio Codeです。 https://teratail.com/tags/Visual+Studio+Code >LIve Server Live Serverです。 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 細かいですが、大事です。もちろん他者がコピペで再現できる情報の提示が最優先ですけどね。質問は編集できます。

shinaozora50

2021/02/16 10:24

指摘された所は、編集で訂正しておきました。

行動規範の内容に同意します

回答1件

ベストアンサー

もし、「ブラウザにドロップ」で動作確認しようとしているなら、パスの指定の仕方が問題になります。
例えば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

m.ts10806

総合スコア80861