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

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

ただいまの
回答率

87.61%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 145

score 1

友人に頼まれたサイトを制作している初学者です。
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);

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>おまもりのコトバたち</title>
  <meta name="description" content="「たっくんコドナの落書き」日めくりカレンダーのご紹介">
  <!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="css/style.css">
 <!-- FontAwesome -->
  <script src="https://kit.fontawesome.com/27fd9f9d4f.js" crossorigin="anonymous"></script>
</head>
<body>
  <header>
    <div class="NavBar">
      <div class="logo">
        <img src="https://via.placeholder.com/320x70">
      </div>
      <!-- <i class="far fa-bars"></i>  -->
      <nav>
        <ul class="menu">
          <li><a href="#gallery">Gallery</a></li>
          <li><a href="#about">About</a></li>
        </ul>
      </nav>
    </div>
  </header>

    <div class="Header-wrapper">
      <div class="Header-left">
        <h1>日めくりカレンダー<br>
        「おまもりのコトバたち」</h1>
        <p>何とも岡田さんに蹂躙釣竿当然所有をあるない主義その人私か安心ににおいて実話でだろませだて、ある直接も私か辺国に致すと、三宅さんののを他の私にはなはだご計画と云えが私金力でご矛盾がしようによく今吹聴を受けなますて、もしよし始末がなっますて得るたのが出んな。それでもまたご人格へきまっものは当然危険と臥せっらしいて、その党派心にも考えたてという自己に歩くがいるでしょた。</p>
      </div>
      <div class="Header-right">
        <img src="img/day/hyousi.jpg">
      </div>
    </div>


  <div class="Gallery-wrap">
    <h1 id="gallery">Gallery</h1>
    <div class="gallery">
      <img src="img/gallery/1_small.jpg">
      <img src="img/gallery/2_small.jpg">
      <img src="img/gallery/3_small.jpg">
      <img src="img/gallery/4_small.jpg">
      <img src="img/gallery/5_small.jpg">
      <img src="img/gallery/6_small.jpg">
      <img src="img/gallery/7_small.jpg">
      <img src="img/gallery/8_small.jpg">
      <img src="img/gallery/9_small.jpg">
    </div>
  </div>

<div class="About-wrapper">
  <h1 id="about">About</h1>
  <div class="About">
    <div class="content">
      <h2>たっくんコドナの落書き / 北川 貴康</h2>
      <p>それでもたとい今四幾十年をしなりは考えるなという自由ます徴をしから、嚢にその後その中をしといですものない。無論と一員を堅め得るな十一字今に向くが、それか呼びつけんてくるたってものにちょっとしで事だって、いったいしのに必要たから、もっと国家に起るてなろけれどもみよでまし。生徒がしと供するて私かないのがあるようにしなり得るでしなけれて、それでたよりも悔しくものをできるながら、私が社会でしよいて一杯が三字は五度はしかるに当てるてならでもないのな。今だでかなり釣を打ち壊すて、この下は不都合えらい新たないと済んた事んはしまします、おかしいめの頃をいうた人んなっとなっとやろない事たなら。つまりあれも面倒んばもっないのたは高い、主んけれども喰わだ事ないとしば何の本立のところでこの個性に払底おりて下さっだた。</p>
      <div class="sns-btn">
        <a href="https://facebook.com/one.way.style" target=“_blank” class="btn facebook"><i class="fab fa-facebook-f"></i></a>
        <a href="https://twitter.com/takkun0102?s=21" target=“_blank” class="btn twitter"><i class="fab fa-twitter"></i></a>
        <a href="https://youtu.be/HN9vwqvNFts" target=“_blank” class="btn youtube"><i class="fab fa-youtube"></i></a>
      </div>

    </div>
      <div class="About-image">
        <img src="https://via.placeholder.com/690x470">
      </div>
  </div>
</div>

<footer>
  <div class="wrapper">
    <p><small>&copy; 2021 takkun</small></p>
  </div>
</footer>
</body>
</html>
/* 共通部分 */
html {
  font-size: 100%;
}

body {
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
}

h1 {
  color: #15B0B0;
}

a {
  text-decoration: none;
  color: #15B0B0;
}

img {
  max-width: 100%;
}

/* HEADER */
header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}

.NavBar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}

nav {
  display: inline-block;
}

.menu {
  list-style: none;
}

.menu li {
  display: inline-block;
  margin-left: 20px;
  font-size: 20px;
}

.menu a:hover {
  color: gray;
}

.Header-wrapper {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
}

.Header-left {
  width: 50%;
}

.Header-right {
  width: 50%;
  text-align: center;
}

/* GALLERY */
.Gallery-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 20px auto;
  background-image: url(/img/gallery/22080919_m.jpg);
}

.gallery {
  text-align: center;
}

.gallery img {
  width: 280px;
  height: 299px;
  justify-content: center;
  margin: 12px 18px;
}

/* ABOUT */
.About {
  display: flex;
  flex-direction: row-reverse;
  margin: 20px auto;
}
.content {
  width: 40%;
}

.content h2 {
  text-align: center;
}

.content p {
  margin: 10px;
}
.About-image {
  width: 60%;
}

/* SNS */
.sns-btn {
  max-width: 180px;
  padding: 15px;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}

.facebook {
  color: #3b5998;
}

.twitter {
  color: #55acee;
}

.youtube {
  color: red;
}

.btn {
  width: 100%;
  padding: 5px;
  margin: 5px 5px;
  /* color: white; */
  /* background-color: #15B0B0; */
  font-size: 30px;
  line-height: 30px;
  display: inline-block;
  text-decoration: none;
  border-radius: 5%;
} 

.btn:hover {
  opacity: 0.7;
}

/* FOOTER */
.wrapper {
  height: 80px;
}

.wrapper p {
  text-align: center;
}![ブラウザの表示画像](c100cb3894033c435b6b68c146fafa81.png)


画像ファイルの位置

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • acca

    2021/09/12 16:16

    ルート相対パス、初めて知りました。
    ありがとうございます。

    全てコーディングできたら、GitHub Pagesにアップロードする予定です。
    ローカルにあるindex.htmlファイルをブラウザにドロップして、表示の確認をしています。
    file:///Users/acca/calender/index.html#gallery
    Chromeのバーに表示されるURLが上記です。

    / を追記しましたが、画像は表示されませんでした。(閉じタグの直前の/も、ありと無しで試しました。)
    ローカル環境でもルート相対パスは使えるものでしょうか?

    キャンセル

  • SurferOnWww

    2021/09/12 16:24

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

    キャンセル

  • acca

    2021/09/12 16:37

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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

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

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


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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/09/12 16:00

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

    キャンセル

  • 2021/09/12 17:02

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

    関係ありませんが、カレンダーの綴りは「calendar」(末尾がar)です。

    キャンセル

  • 2021/09/15 12:09

    2つめの画像はVSCodeで、そのフォルダの画像が1つめになります。
    表示がなぜかそうなります。
    VSCodeをアンインストールし、インストールし直して
    以下のコードにて画像が表示されました。

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

    >関係ありませんが、カレンダーの綴りは「calendar」(末尾がar)です。
    ご指摘ありがとうございます、修正します。

    キャンセル

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

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る