HTMLで画像を表示したいが表示されない。

画像を表示させたいのですが、表示出来ません。
画像のURLが間違っているのでしょうか？
何度か調べながら試してみたのですができないため
わかる方ご教示の程よろしくお願いします。

画像のURLが間違っているのかそのほかに間違っているのかが
わかりません。

HTML
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <link rel="stylesheet" href="stylesheet.css">
5    <link rel="stylesheet" href="resposive.css">
6    <meta charset="utf-8">
7    <script src="https://kit.fontawesome.com/54b0f8321f.js" crossorigin="anonymous"></script>
8    <meta name="viewport" content="width=device-width,initial-scale=1.0">
9
10
11    <title></title>
12  </head>
13  <body>
14
15<div class="wrapper">
16  <div class="sidebar">
17    <div class="side-contents">
18      <img class="side-logo" src="image/logo.png" alt="ロゴ写真">
19      <ul class="side-menu">
20        <li><a href="#">TOP</a></li>
21        <li><a href="#">MESSAGE</a></li>
22        <li><a href="#">GALLERY</a></li>
23        <li><a href="#">BRAND</a></li>
24        <li><a href="#">PROJECT</a></li>
25        <li><a href="#">CO0MPANY</a></li>
26      </ul>
27    <div class="side-icon">
28      <a href="#"><i class="fab fa-facebook-square"></i></a>
29      <a href="#"><i class="fab fa-twitter-square"></i></a>
30      <a href="#"><i class="fab fa-instagram-square"></i></a>
31      <a href="#"><i class="fab fa-youtube-square"></i></a>
32
33    </div>
34   </div>
35  </div>
36
37<div class="contents">
38  <img class="top-image" src="mainImg.jpg" />
39
40  <div class="message-wrapper">
41    <h1 class="heading">MESSAGE</h1>
42    <div class="textarea">
43      <p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社。ホームページサンプル株式会社では最新技術と自然との調和を目な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
44    </div>
45  </div>
46
47  <div class="photo-wrapper">
48    <img src="photo01.jpg" /><img src="photo02.jpg" /><img src="photo03.jpg" />
49    <img src="photo04.jpg" /><img src="photo05.jpg" /><img src="photo06.jpg" />
50    <span><img class="big-photo" src="photo07.jpg" /></span>
51    <img src="photo08.jpg" /><img src="photo09.jpg" /><img src="photo10.jpg" />
52    <img src="photo11.jpg" /><img src="photo12.jpg" /><img src="photo13.jpg" />
53  </div>
54
55  <div class="brand-wrapper">
56    <h1 class="heading">BRAND</h1>
57    <div class="brand-contents">
58      <div class="contents-item">
59        <img src="logo01.png" />
60        <p>ホームページサンプル株式会社では最動かす企業を目指します。</p>
61
62
63          <div class="contents-item">
64            <img src="logo02.png" />
65            <p>革新的な技術で世の中を動かす企業を目します。世の中を動かす。</p>
66
67      <div class="brand-contents">
68          <div class="contents-item">
69            <img src="logo03.png" />
70            <p>株式会社では最動かす企業を目指しますージン企業を目指します。</p>
71
72      <div class="brand-contents">
73          <div class="contents-item">
74            <img src="logo04.png" />
75            <p>株式会社では最動かす企業を指しますージサン企業を目指します。</p>
76          </div>
77     </div>
78   </div>
79
80   <div class="project-wrapper">
81     <h1 class="heading">PROJECT</h1>
82     <div class="project-contents">
83       <div class="project-item">
84         <img src="photo14.jpg" />
85         <p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な革新的な革新的な技術で世の中を技術で世の中を技術で世の中を動かす企業を目指します。</br></br>
86
87ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指し調和を目指し調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
88       </div>
89
90       <div class="project-item">
91         <img src="photo15.jpg" />
92         <p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な革新的な革新的な技術で世の中を技術で世の中を技術で世の中を動かす企業を目指します。</br></br>
93
94ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社。ホームページサンプル最新技術と自然との調和を目指し調和を目指し調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p>
95       </div>
96     </div>
97   </div>
98
99
100   <div class="company-wrapper">
101     <h1 class="heading">CO0MPANY</h1>
102     <div class="company-contents">
103       <p class="address">〒103-1234</br>
104見本県見本市仮区見本町1-3-5</br>
105
106TEL 01234-567-8901</br>
107
108e-Mail info@example.com</br>
109
110営業時間 10:00〜20:00（水曜定休）</br>
111
112※都合により休業する場合がございます</p>
113
114<div class="ggmap">
115  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12794.37516750043!2d136.931998!3d36.708298!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2ade3e8e4c2801b8!2z56aP5bKh6aeF!5e0!3m2!1sja!2sus!4v1626598164630!5m2!1sja!2sus" width="550" height="200" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
116
117</div>
118
119     </div>
120
121   </div>
122
123  </div>
124
125</div>
126
127<footer>
128  <p>Copyright(c) 2016 Sample Inc. All Rights Reserved. Design by <a href="http://f-tpl.com"></a></p>
129</footer>
130  </body>
131</html>

CSS
1/*
2html5doctor.com Reset Stylesheet
3v1.6.1
4Last Updated: 2010-09-17
5Author: Richard Clark - http://richclarkdesign.com
6Twitter: @rich_clark
7*/
8
9html, body, div, span, object, iframe,
10h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11abbr, address, cite, code,
12del, dfn, em, img, ins, kbd, q, samp,
13small, strong, sub, sup, var,
14b, i,
15dl, dt, dd, ol, ul, li,
16fieldset, form, label, legend,
17table, caption, tbody, tfoot, thead, tr, th, td,
18article, aside, canvas, details, figcaption, figure,
19footer, header, hgroup, menu, nav, section, summary,
20time, mark, audio, video {
21    margin:0;
22    padding:0;
23    border:0;
24    outline:0;
25    font-size:100%;
26    vertical-align:baseline;
27    background:transparent;
28}
29
30body {
31    line-height:1;
32}
33
34article,aside,details,figcaption,figure,
35footer,header,hgroup,menu,nav,section {
36    display:block;
37}
38
39nav ul {
40    list-style:none;
41}
42
43blockquote, q {
44    quotes:none;
45}
46
47blockquote:before, blockquote:after,
48q:before, q:after {
49    content:'';
50    content:none;
51}
52
53a {
54    margin:0;
55    padding:0;
56    font-size:100%;
57    vertical-align:baseline;
58    background:transparent;
59}
60
61/* change colours to suit your needs */
62ins {
63    background-color:#ff9;
64    color:#000;
65    text-decoration:none;
66}
67
68/* change colours to suit your needs */
69mark {
70    background-color:#ff9;
71    color:#000;
72    font-style:italic;
73    font-weight:bold;
74}
75
76del {
77    text-decoration: line-through;
78}
79
80abbr[title], dfn[title] {
81    border-bottom:1px dotted;
82    cursor:help;
83}
84
85table {
86    border-collapse:collapse;
87    border-spacing:0;
88}
89
90/* change border colour to suit your needs */
91hr {
92    display:block;
93    height:1px;
94    border:0;
95    border-top:1px solid #cccccc;
96    margin:1em 0;
97    padding:0;
98}
99
100input, select {
101    vertical-align:middle;
102}
103
104body {
105    text-size-adjust: 100%;
106    overflow-x: hidden;
107    color: rgb(255, 255, 255);
108    font: 300 14px / 1.9 "Noto Sans JP", Arial, Verdana, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
109    background: rgb(0, 0, 0);
110}
111
112a {
113  color: white;
114  text-decoration: none;
115}
116
117li {
118  list-style: none;
119
120}
121
122img {
123  vertical-align: bottom;
124}
125
126.sidebar {
127  background-color: pink;
128  width: 20%;
129  position: fixed;
130  right: 0;
131  height: 100%;
132}
133
134.side-logo {
135  height: 22.42px;
136  width: 87px;
137  padding: 25px 0 40px 0;
138
139}
140
141.side-contents {
142  padding-left: 16%;
143}
144
145.side-menu li a {
146  color: #fff;
147    font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
148    font-size: 14px;
149}
150
151.side-menu li a:hover {
152  text-decoration: underline;
153}
154
155.side-menu li {
156  padding-bottom: 25px;
157}
158
159.side-icon .fab {
160  padding: 45px 10px 0 0;
161}
162
163.side-icon .fab:hover {
164  opacity: 0 0;
165}
166
167.contents {
168  width: 80%;
169}
170
171.top-images {
172  width: 100%;
173
174}
175
176.message-wrapper {
177  width: 70%;
178  margin: 0 auto;
179  text-align: center;
180}
181
182.heading {
183  font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
184  font-size: 22px;
185  padding: 80px 0 20px 0;
186  margin-bottom: 50px ;
187  border-bottom: 3px solid white;
188  display: inline-block;
189}
190
191.textarea {
192  width: 85%;
193  margin: 0 auto;
194  text-align: left;
195  padding-bottom: 80px;
196}
197
198.photo-wrapper img {
199  width: 33.3333333%;
200}
201
202.span .big-photo {
203  width: 100%;
204}
205
206.brand-wrapper {
207  width: 80%;
208  margin: 0 auto;
209  text-align: center;
210}
211
212.brand-contents {
213  display: flex;
214  padding-bottom: 50px;
215  border-bottom: 1px solid white;
216}
217
218.contents-item {
219  width: 25%;
220  padding: 0 25px;
221  padding-bottom: 10px;
222  text-align: left;
223}
224
225.contents-item img {
226  width: 100%;
227}
228
229.contents-item p {
230  width: 90%;
231}
232
233.project-wrapper {
234  width: 80%;
235  margin: 0 auto;
236  text-align: center;
237  padding-bottom: 120px;
238  border-bottom: 1px solid white;
239}
240
241.project-item {
242  display: flex;
243  padding-bottom: 70px;
244}
245
246.project-item img {
247  width: 375px;
248  height: 225px;
249  padding-right: 20px;
250}
251
252.project-item p {
253  text-align: left;
254}
255
256
257.company-wrapper {
258  width: 80%;
259  margin: 0 auto;
260  text-align: center;
261}
262
263.company-contents {
264  display: flex;
265  padding-top: 30px;
266  padding-bottom: 200px;
267}
268
269.address {
270  text-align: left;
271  margin-right: 12%
272}
273
274.ggmap {
275  background-color: pink;
276  width: 60%;
277  position: relative;
278  padding-bottom: 25%;
279}
280
281iframe {
282  position: absolute;
283  top: 0;
284  left: 0;
285  width: 100%;
286  height: 100%;
287
288}
289
290footer {
291  width: 80%;
292  text-align: center;
293}
294
295footer p {
296  padding-bottom: 60px;
297  font-size: 12px;
298}
299
300footer a {
301  color: blue;
302}
303
304```![イメージ説明](e6f3412f506374c24227aa389b82f1eb.png)

MikenekoSamane

2021/07/19 15:46

HTMLと画像ファイルが同階層であればURLはあってますがそれ以外ならフォルダ構成が分からないことには指摘の仕様がないですね。

mayugee228

2021/07/19 16:27

ご回答有り難うございます！！確認したところ同階層ですね。。すみません。コード付け足しました。

m.ts10806

2021/07/19 21:10

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2021/07/19 21:10

また「同階層である」ことが分かる情報を提示してください。

mayugee228

2021/07/20 01:14

ご丁寧に教えて頂き有り難うございます！コードの表示修正しました。画像の階層が違い、 <img class="side-logo" src="image/logo.png" alt="ロゴ写真"> <image class="side-logo" src="image/logo.png" alt="ロゴ写真"> などで試したものの表示できません。。何か原因がわかるようでしたらご教示頂けるとありがたいです。

K_3578

2021/07/20 01:46 編集

画像入れてるフォルダ名はimageじゃなくてimagesって書いてありますけど、単なるフォルダ名の書き間違えじゃ? 後、画像ファイルも間違えてる。pngがjpgになってたり。

mayugee228

2021/07/20 02:50

K_3578様全て修正すると出来ました！ご教示ありがとうのほど有り難うございましたm(_ _)m

K_3578

2021/07/20 02:58

別に気になったからツッコんだだけですけど、 "ありがとうのほど有り難うございました" は日本語としておかしいっすね。

mayugee228

2021/07/20 03:09

入力ミスでした。。。

K_3578

2021/07/20 03:11

一応教えておくとコメントもマウスオーバーした際に右上に出てくるペンのマーク押せば編集できますよ。意味もなく内容抹消したりとかはやめて欲しいですが。

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

回答2件

追加で張っていただいたスクリーンショットを見ると、ソースコードのフォルダ名が違っているようです。ご確認ください。

投稿2021/07/20 01:31

javahack

総合スコア1088

mayugee228

2021/07/20 02:52

ご教示の程有り難うございます！！無事できましたm(_ _)m

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

ベストアンサー

画像を表示させたいのですが、表示出来ません

いくつか画像がありますが、どの画像でしょうか？

例えば

html
1<image class="side-logo" src="./image/logo.jpg">

であれば、以下のように、このhtmlファイルが入っているフォルダの中のimageフォルダにlogo.jpgが入っていなければ表示されません。
入っているでしょうか？

+ フォルダ
　+ htmlファイル
　+ imageフォルダ
  　  logo.jpg

投稿2021/07/19 23:31

momotuwo

総合スコア155

mayugee228

2021/07/20 01:16

ご教示有り難うございます。コードの表示修正と画像写真追加させて頂きました！ <image class="side-logo" src="./image/logo.jpg"> で試したものの表示ができなかったです。。何かほかに思い当たるところがあればご教示いただけると幸いです。

momotuwo

2021/07/20 01:45

添付いただいたものを見た限り ①logo.jpgではなくlogo.pngではないでしょうか？ ×jpg 〇png ②フォルダ名も imageではなくimagesにしなければ動作しないかと思います

mayugee228

2021/07/20 02:51

ご丁寧にありがとうございます！全て修正し直したところ出来ました！！ありがとうございましたm(_ _)m

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

HTMLで画像を表示したいが表示されない。

関連した質問