htmlでwebサイトを作成しているのですが画像が表示されません

前提・実現したいこと

freehtml5.coからテンプレートをダウンロードしてwebサイトを作っています。テンプレートにもともと入っている画像は正しく表示されているのですが、自分が表示したい画像をimagesに入れて表示しようとしても、画像が表示されません。拡張子はpng,jpgで、名前に空白や日本語なども使っていません。

発生している問題・エラーメッセージ

ブラウザ上で画像が表示されません

該当のソースコード

html

試したこと

補足情報（FW/ツールのバージョンなど）

サーバーを借りたりなどはまだしていないのでサーバー上にアップロード等はしていません

前提・実現したいこと

発生している問題・エラーメッセージ

ブラウザ上で画像が表示されません

該当のソースコード

html

試したこと

補足情報（FW/ツールのバージョンなど）

追記


コード<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Foodee &mdash; 100% Free Fully Responsive HTML5 Template by FREEHTML5.co</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Template by FREEHTML5.CO" />
    <meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
    <meta name="author" content="FREEHTML5.CO" />

  <!-- 
    //////////////////////////////////////////////////////

    FREE HTML5 TEMPLATE 
    DESIGNED & DEVELOPED by FREEHTML5.CO

    Website:         http://freehtml5.co/
    Email:             info@freehtml5.co
    Twitter:         http://twitter.com/fh5co
    Facebook:         https://www.facebook.com/fh5co

    //////////////////////////////////////////////////////
     -->

      <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="shortcut icon" href="favicon.ico">

    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Merriweather:300,400italic,300italic,400,700italic' rel='stylesheet' type='text/css'>

    <!-- Animate.css -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="css/icomoon.css">
    <!-- Simple Line Icons -->
    <link rel="stylesheet" href="css/simple-line-icons.css">
    <!-- Datetimepicker -->
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
    <!-- Flexslider -->
    <link rel="stylesheet" href="css/flexslider.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="css/bootstrap.css">

    <link rel="stylesheet" href="css/style.css">


    <!-- Modernizr JS -->
    <script src="js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    </head>
    <body>

    <div id="fh5co-container">
        <div id="fh5co-home" class="js-fullheight" data-section="home">

            <div class="flexslider">

                <div class="fh5co-overlay"></div>
                <div class="fh5co-text">
                    <div class="container">
                        <div class="row">
                            <h1 class="to-animate">foodee</h1>
                            <h2 class="to-animate">Lovely Designed <span>by</span> <a href="http://freehtml5.co/" target="_blank">freehtml5.co</a></h2>
                        </div>
                    </div>
                </div>
                  <ul class="slides">
                   <li style="background-image: url(images/ramen_1.png);" data-stellar-background-ratio="0.5"></li>
                   <li style="background-image: url(images/ramen_2.png);" data-stellar-background-ratio="0.5"></li>
                   <li style="background-image: url(images/ramen_3.png);" data-stellar-background-ratio="0.5"></li>
                  </ul>

            </div>

        </div>

上記がテンプレートの一部なのですが、<li style="background-image: url(images/ramen_1.png);" data-stellar-background-ratio="0.5"></li>
のramen_1.png ramen_2.png ramen_3.png　をデフォルトと変えて自分の入れたい画像にしています。ですが、デフォルトから変えたら画像が表示されなくなります。

KazuSaka

2019/12/07 07:26 編集

widthとheightを設定すれば、表示できないでしょうか！？私の環境では、この設定で表示できました。ただ、画像サイズを調整するために、background-sizeとか使う必要があると思います。参考までに https://www.sejuku.net/blog/55771 以上です。

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

回答1件

まず下記のようにして表示されるか確かめてください。

html
1
2<img src="images/back1.jpg">

これで表示される場合、構文的なミスです。

"background-image: url("images/back1.jpg");"

ダブルクォーテーションの中にダブルクォーテーションがあります。
これでは開始と終了をブラウザが誤認してしまう原因となります。

html
1"background-image: url('images/back1.jpg');"

もしimgタグにかえて表示されなかった場合は、
当該記述のあるhtmlからのパスが合っていないか、画像がそこにない（または破損している）のいずれかだと思います。
（合ってるならキャッシュですかね）

投稿2019/12/07 07:01

編集2019/12/07 07:04

m.ts10806

総合スコア80875

syosinsya125

2019/12/07 07:48

imgにしても表示されなかったので画像を入れ直したんですがそれでも表示されませんでしたパスも合ってるはずなんですが

m.ts10806

2019/12/07 07:58

「はず」ではご自身だけしか知らないご自身の評価となります。それぞれのファイルの階層が分かる情報を質問本文に追記してください。

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

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

htmlでwebサイトを作成しているのですが画像が表示されません

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

関連した質問