レンタルサーバーにアップロードしたら画像が表示されません。

vscodeで作成したWebサイトを、エックスサーバーにアップロードしたら、画像が表示されません。
ローカルだと問題なく表示されるので、原因がわかりません。
拡張機能のSFTPで、ftp設定でのアップロードを終えたばかりです。
画像の設定やフォルダなどを変えても同じ感じになります。
画像は、PSD形式のデザインから切り抜いてデスクトップのフォルダに保存したものを、vscodeの作成サイト用のimageフォルダにドラックしてコピーしたものです。
imgタグのheightはピクセル指定でもautoでもだめでした。

自分の作ったサイトのアドレスは、https://siteofearth.com/1/　です。
コードは、以下のとおりです。
ご回答よろしくおねがいします。

filzilaでの画面です。画像フォルダは存在していましたが、Vscode上と違います。
Vscodeがまだ全然分かっていないので、申し訳ありません。
Isaraの模写コーディングのソースはサーバーにアップ禁止なので、別フォルダに移した際に、フォルダ「模写コーディング」を英語表記(漢字表記のフォルダをなくすため）の「mosya」に変えたときになんだかわからないけどワークスペースが出来てしまった経緯があります。

Vscodeの画面です。

Vscodeのindex.htmlのimgタグの相対パス（<img src="1\image\main.png"> ）のリンクを表示を押すと、

「イメージ読込中にエラーが発生しました。」
「vscodeの標準テキストまたはバイナリエディターを使用してファイルを開きますか？」

と出ました。

「vscodeの標準テキストまたはバイナリエディターを使用してファイルを開きますか？」のリンクを押すと

'main.png' を開くことができません: ファイル 'c:\Users\正人.vscode\mosya\1\1\image\main.png' を読み取れません (Error: 存在しないファイル 'c:\Users\正人.vscode\mosya\1\1\image\main.png' を解決できません)。（右下にフォルダを作成ボタンの表示）。

右下のフォルダを作成ボタンを押すと、もともとあるimageフォルダの他に、1\imageフォルダが新たに作られて、その中にimageフォルダと同じ名前のmain.pngファイルが入っています。
そのファイルのリンクを表示を押すと、コードを書く感じになります。

サイトのF12で見た時の画像はこちらです。

画像が１/４現れた状態

https://siteofearth.com/1/image/main.png　で表示した状態。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="stylesheet.css">
7    <title>Document</title>
8</head>
9<body>
10    <nav>
11        <ul>
12            <li class="li-1">CITY Lab</li>
13            <li class="li-2">サービス</li>
14            <li class="li-3">ニュース</li>
15            <li class="li-4">ＣＳＲ</li>
16            <li class="li-5">ＩＲ情報</li>
17            <li class="li-6">会社情報</li>
18            <li class="li-7">採用情報</li>
19            <li class="li-8">お問い合わせ</li>
20        </ul>
21        
22    </nav>
23
24    <section class="section-1">
25       <img src="C:\Users\雅功.vscode\mosya\1\image\_notes\画像1.png"> 
26    </section>
27
28    <section class="section-2">
29        <div class="news">
30            <div class="news-menu">
31                <div class="text">ＮＥＷＳ</div>
32                一覧を見る
33
34            </div>
35            <div class="news-text">
36                <div class="all">
37                    <div class="all-1">2020.3.14</div><div class="all-2">プレス</div><div class="all-3">【東京オリンピック会場跡地再開発計画】複合スポーツ施設及び新テーマパーク工事開始のお知らせ</div>
38                </div>
39                <div class="all">
40                    <div class="all-1">2020.2.30</div><div class="all-2">ＩＲ</div><div class="all-3">2019年9月期　第1四半期決算説明会動画</div>
41                </div>
42                <div class="all">
43                    <div class="all-1">2020.2.30</div><div class="all-2">ＩＲ</div><div class="all-3">2019年9月期　　第1四半期決算説明会資料</div>
44                </div>
45                
46
47            </div>
48        </div>
49    </section>
50
51    <section class="section-3">
52        <div class="service">
53            <div class="sli">Service</div>
54            city Labの事業
55        </div>
56
57        <div class="cell-3">
58            <div class="sell"></div>
59            <div class="sell"></div>
60            <div class="sell"></div>
61            
62        </div>
63    </section>
64    
65</body>
66</html>

CSS
1body {
2  width: 1600px;
3  height: 1200px;
4  margin: auto;
5  border: thin;
6}
7
8nav {
9  height: 80px;
10  background-color: white;
11  border: 5px thin black;
12}
13
14ul {
15  list-style: none;
16  display: flex;
17}
18
19li {
20  margin-top: 25px;
21  padding: auto;
22  flex: auto;
23}
24
25.li-1 {
26  margin-left: 40px;
27  margin-top: 14px;
28  font-size: 28px;
29  color: #019bdf;
30}
31
32.li-2 {
33  margin-left: 600px;
34  font-size: 14px;
35}
36
37.li-3 {
38  /*margin-left: 56px;*/
39  font-size: 14px;
40}
41
42.li-4 {
43  /*margin-left: 56px;*/
44  font-size: 14px;
45}
46
47.li-5 {
48  /*margin-left: 56px;*/
49  font-size: 14px;
50}
51
52.li-6 {
53  /*margin-left: 56px;*/
54  font-size: 14px;
55}
56
57.li-7 {
58  /*margin-left: 56px;*/
59  font-size: 14px;
60}
61
62.li-8 {
63  width: 200px;
64  height: 56px;
65  text-align: center;
66  margin-top: 0px;
67  /*margin-left: 74px;*/
68  font-size: 16px;
69  padding-top: 25px;
70  background-color: #30d0ed;
71  color: #ffffff;
72  float: left;
73}
74
75.section-1 {
76  height: 670px;
77}
78
79img {
80  width: 1600px;
81  height: auto;
82}
83
84.section-2 {
85  width: 1600px;
86  height: 120px;
87  padding: 60px 0px;
88  background-color: #edfcff;
89}
90
91.news {
92  width: 1200px;
93  height: 120px;
94  margin: auto;
95}
96
97.news-menu {
98  width: 160px;
99  height: 120px;
100  float: left;
101  font-size: 12px;
102}
103
104.news-text {
105  width: 1050px;
106  height: 120px;
107}
108
109.all {
110  display: flex;
111  border-bottom: solid #019bdf;
112  height: 30px;
113  padding-top: 15px;
114  font-size: 13px;
115}
116
117.all-1 {
118  width: 120px;
119  height: 45px;
120}
121
122.all-2 {
123  width: 60px;
124  height: 15px;
125  margin: 0px 20px;
126  background-color: #019bdf;
127  text-align: center;
128  color: white;
129}
130
131.all-3 {
132  width: 1000px;
133  height: 45px;
134}
135
136.text {
137  color: #019bdf;
138  font-size: 40px;
139  letter-spacing: -0.2em;
140}
141
142.section-3 {
143  width: 1600px;
144  height: auto;
145  font-size: 13px;
146}
147
148.service {
149  width: auto;
150  height: auto;
151  padding: 80px;
152  text-align: center;
153  color: #019bdf;
154}
155
156.sli {
157  font-size: 40px;
158}
159
160.cell-3 {
161  width: auto;
162  height: 60px;
163  padding: 0px 200px 0px 200px;
164  display: flex;
165  justify-content: space-between;
166  padding: 0px 200px;
167  text-align: center;
168}
169
170.sell {
171  width: 380px;
172  height: auto;
173  background-color: #e8e8e8;
174}
175
176.form {
177  margin: auto;
178}
179

退会済みユーザー

2021/04/11 04:01

私の回答のコメント欄でお願いしましたが、質問欄にFileZilla の画像を貼ってください。その際、質問に書いてあった html ファイルと、画像の位置関係が分かるようにしてください。html ファイルをブラウザに表示させた時のブラウザのアドレスバーの url を書いてください。

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

関連した質問