HTML img画像が表示されません

友人に頼まれたサイトを制作している初学者です。
imgタグの相対パスは合っていると思いますが、画像が表示されません。
ネットで「相対パス」や「HTML 画像　表示されない　jpg」で検索し、確認しました。
その際、画像が格納されているimgフォルダと htmlファイルが同じ階層という認識で
画像の<img src="img/gallery/1_small.jpg">と記載しています。
（ローカルで作成し、chromeのブラウザで表示の確認を行っています。）

また、画像データの破損や拡張子も確認しましたが問題ありません。
以下のようなダミーだと上手く配置されます。
<img src="https://via.placeholder.com/280x280">

<div class="Header-right"> のimg <div class="gallery"> のimg CSS .Gallery-wrap の background-image: url(/img/gallery/22080919_m.jpg);

上記を表示させたいです。
他に考えられる原因があれば、ご教示お願い致します。

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  <title>おまもりのコトバたち</title>
8  <meta name="description" content="「たっくんコドナの落書き」日めくりカレンダーのご紹介">
9  <!-- CSS -->
10  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
11  <link rel="stylesheet" href="css/style.css">
12 <!-- FontAwesome -->
13  <script src="https://kit.fontawesome.com/27fd9f9d4f.js" crossorigin="anonymous"></script>
14</head>
15<body>
16  <header>
17    <div class="NavBar">
18      <div class="logo">
19        <img src="https://via.placeholder.com/320x70">
20      </div>
21      <!-- <i class="far fa-bars"></i>  -->
22      <nav>
23        <ul class="menu">
24          <li><a href="#gallery">Gallery</a></li>
25          <li><a href="#about">About</a></li>
26        </ul>
27      </nav>
28    </div>
29  </header>
30
31    <div class="Header-wrapper">
32      <div class="Header-left">
33        <h1>日めくりカレンダー<br>
34        「おまもりのコトバたち」</h1>
35        <p>何とも岡田さんに蹂躙釣竿当然所有をあるない主義その人私か安心ににおいて実話でだろませだて、ある直接も私か辺国に致すと、三宅さんののを他の私にはなはだご計画と云えが私金力でご矛盾がしようによく今吹聴を受けなますて、もしよし始末がなっますて得るたのが出んな。それでもまたご人格へきまっものは当然危険と臥せっらしいて、その党派心にも考えたてという自己に歩くがいるでしょた。</p>
36      </div>
37      <div class="Header-right">
38        <img src="img/day/hyousi.jpg">
39      </div>
40    </div>
41
42
43  <div class="Gallery-wrap">
44    <h1 id="gallery">Gallery</h1>
45    <div class="gallery">
46      <img src="img/gallery/1_small.jpg">
47      <img src="img/gallery/2_small.jpg">
48      <img src="img/gallery/3_small.jpg">
49      <img src="img/gallery/4_small.jpg">
50      <img src="img/gallery/5_small.jpg">
51      <img src="img/gallery/6_small.jpg">
52      <img src="img/gallery/7_small.jpg">
53      <img src="img/gallery/8_small.jpg">
54      <img src="img/gallery/9_small.jpg">
55    </div>
56  </div>
57
58<div class="About-wrapper">
59  <h1 id="about">About</h1>
60  <div class="About">
61    <div class="content">
62      <h2>たっくんコドナの落書き / 北川 貴康</h2>
63      <p>それでもたとい今四幾十年をしなりは考えるなという自由ます徴をしから、嚢にその後その中をしといですものない。無論と一員を堅め得るな十一字今に向くが、それか呼びつけんてくるたってものにちょっとしで事だって、いったいしのに必要たから、もっと国家に起るてなろけれどもみよでまし。生徒がしと供するて私かないのがあるようにしなり得るでしなけれて、それでたよりも悔しくものをできるながら、私が社会でしよいて一杯が三字は五度はしかるに当てるてならでもないのな。今だでかなり釣を打ち壊すて、この下は不都合えらい新たないと済んた事んはしまします、おかしいめの頃をいうた人んなっとなっとやろない事たなら。つまりあれも面倒んばもっないのたは高い、主んけれども喰わだ事ないとしば何の本立のところでこの個性に払底おりて下さっだた。</p>
64      <div class="sns-btn">
65        <a href="https://facebook.com/one.way.style" target=“_blank” class="btn facebook"><i class="fab fa-facebook-f"></i></a>
66        <a href="https://twitter.com/takkun0102?s=21" target=“_blank” class="btn twitter"><i class="fab fa-twitter"></i></a>
67        <a href="https://youtu.be/HN9vwqvNFts" target=“_blank” class="btn youtube"><i class="fab fa-youtube"></i></a>
68      </div>
69
70    </div>
71      <div class="About-image">
72        <img src="https://via.placeholder.com/690x470">
73      </div>
74  </div>
75</div>
76
77<footer>
78  <div class="wrapper">
79    <p><small>&copy; 2021 takkun</small></p>
80  </div>
81</footer>
82</body>
83</html>
84

CSS
1/* 共通部分 */
2html {
3  font-size: 100%;
4}
5
6body {
7  max-width: 1170px;
8  width: 100%;
9  margin: 0 auto;
10}
11
12h1 {
13  color: #15B0B0;
14}
15
16a {
17  text-decoration: none;
18  color: #15B0B0;
19}
20
21img {
22  max-width: 100%;
23}
24
25/* HEADER */
26header {
27  max-width: 1100px;
28  margin: 0 auto;
29  padding: 0 4%;
30}
31
32.NavBar {
33  display: flex;
34  flex-direction: row;
35  justify-content: space-between;
36  margin-top: 20px;
37}
38
39nav {
40  display: inline-block;
41}
42
43.menu {
44  list-style: none;
45}
46
47.menu li {
48  display: inline-block;
49  margin-left: 20px;
50  font-size: 20px;
51}
52
53.menu a:hover {
54  color: gray;
55}
56
57.Header-wrapper {
58  display: flex;
59  flex-direction: row;
60  margin-top: 30px;
61}
62
63.Header-left {
64  width: 50%;
65}
66
67.Header-right {
68  width: 50%;
69  text-align: center;
70}
71
72/* GALLERY */
73.Gallery-wrap {
74  display: flex;
75  flex-flow: row wrap;
76  justify-content: space-between;
77  margin: 20px auto;
78  background-image: url(/img/gallery/22080919_m.jpg);
79}
80
81.gallery {
82  text-align: center;
83}
84
85.gallery img {
86  width: 280px;
87  height: 299px;
88  justify-content: center;
89  margin: 12px 18px;
90}
91
92/* ABOUT */
93.About {
94  display: flex;
95  flex-direction: row-reverse;
96  margin: 20px auto;
97}
98.content {
99  width: 40%;
100}
101
102.content h2 {
103  text-align: center;
104}
105
106.content p {
107  margin: 10px;
108}
109.About-image {
110  width: 60%;
111}
112
113/* SNS */
114.sns-btn {
115  max-width: 180px;
116  padding: 15px;
117  text-align: center;
118  display: flex;
119  flex-flow: row nowrap;
120  align-items: center;
121  justify-content: flex-start;
122}
123
124.facebook {
125  color: #3b5998;
126}
127
128.twitter {
129  color: #55acee;
130}
131
132.youtube {
133  color: red;
134}
135
136.btn {
137  width: 100%;
138  padding: 5px;
139  margin: 5px 5px;
140  /* color: white; */
141  /* background-color: #15B0B0; */
142  font-size: 30px;
143  line-height: 30px;
144  display: inline-block;
145  text-decoration: none;
146  border-radius: 5%;
147} 
148
149.btn:hover {
150  opacity: 0.7;
151}
152
153/* FOOTER */
154.wrapper {
155  height: 80px;
156}
157
158.wrapper p {
159  text-align: center;
160}![ブラウザの表示画像](c100cb3894033c435b6b68c146fafa81.png)

退会済みユーザー

2021/09/12 02:06

> imgタグの相対パスは合っていると思いますどのように確認したのですか？　「思います」ではなくて絶対間違いないと言えるレベルまで確認したのでしょうか？

acca

2021/09/12 06:39

言葉足らずで申し訳ありません。ネットで「相対パス」や「HTML 画像　表示されない　jpg」で検索し、確認しました。その際、画像が格納されているimgフォルダと htmlファイルが同じ階層という認識でしたので画像の<img src="img/gallery/1_small.jpg">と記載しておりました。「思います」ではなく、上記内容を書くべきでした。ご指摘ありがとうございます。

退会済みユーザー

2021/09/12 06:51

/ で始まるサイトルート相対パス（絶対パスと言う人もいるので注意）を使ったらどうですか？　例えば、質問者さんのサイトの画像ファイルの URL が、 http://<host name>/img/gallery/1_small.jpg である場合は、 <img src="/img/gallery/1_small.jpg" /> のようにするということです。そうすれば html ページがサイトのどこにあっても同じ設定で良いわけで、画像のパスに悩む必要はなくなります。

acca

2021/09/12 07:16

ルート相対パス、初めて知りました。ありがとうございます。全てコーディングできたら、GitHub Pagesにアップロードする予定です。ローカルにあるindex.htmlファイルをブラウザにドロップして、表示の確認をしています。 file:///Users/acca/calender/index.html#gallery Chromeのバーに表示されるURLが上記です。 / を追記しましたが、画像は表示されませんでした。（閉じタグの直前の/も、ありと無しで試しました。）ローカル環境でもルート相対パスは使えるものでしょうか？

退会済みユーザー

2021/09/12 07:24

file:///... とかいうのはダメでは？　ブラウザがアクセスして画像を取得できるように、すべてを Web サーバーに配置してください。開発環境に何を使っているか分かりませんが、開発用の Web サーバーが使えるものをお勧めします。

acca

2021/09/12 07:37

＞file:///... とかいうのはダメでは？やはりそうなのですね。ファイルをアップロードして、ルート相対パスを試してみます。

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

回答1件

ベストアンサー

相対パスの使い方を理解しましょう。
下記が参考になると思います。

【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！ | webliker

画像を見る限りは下記のような感じかな?

html
1<img src="../img/gallery/1_small.jpg">

style.css からの相対パスになるので、

css
1background-image: url(../../img/gallery/22080919_m.jpg);

投稿2021/09/12 02:33

編集2021/09/12 02:56

hatena19

総合スコア33699

acca

2021/09/12 07:00

質問（本文）を追記しました。 index.html と imgフォルダは同じ階層なので、../ はつけていませんでした。 CSSの記述については、私の認識が間違っていました。添付いただいた参考URLありがとうございます。自分で検索して見ていたサイトよりわかりやすいです。ご回答いただいた上記の通りにHTMLとCSSを修正してみましたが、表示されないままでした。

Daregada

2021/09/12 08:02

提示されている2つめの画像だと、index.htmlとcssフォルダーがcalenderフォルダーの下にあり、imgフォルダーはcalenderフォルダーと同レベルにあるように見えるのですが。 1つめの画像のような構造であれば、cssフォルダーと同じインデントでimgフォルダーが表示されるはずです。どちらが正しいのでしょうか。2つめの画像はVSCodeですか? 関係ありませんが、カレンダーの綴りは「calendar」(末尾がar)です。

acca

2021/09/15 03:09

２つめの画像はVSCodeで、そのフォルダの画像が１つめになります。表示がなぜかそうなります。 VSCodeをアンインストールし、インストールし直して以下のコードにて画像が表示されました。 <img src="./img/gallery/1_small.jpg" > ＞関係ありませんが、カレンダーの綴りは「calendar」(末尾がar)です。ご指摘ありがとうございます、修正します。

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