本番環境の画像の表示について
解決したいこと
ローカル環境だと、表示されるが、本番環境では、画像が表示されない
HTMLとCSSでホームページを作っています
発生している問題・エラー
出ているエラーメッセージを入力
ローカル環境
https://gyazo.com/fffcd933973e884e9ef199f2b097e0bc
本番環境
https://gyazo.com/7fa15be91f930178e521d10fadae373b
該当するソースコード
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Creepster rel="stylesheet">
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
<title>健太のホームページ</title>
</head>
<body>
<header>
<div class="heading">
<h1 class="title">KENTA FUJIOKA</h1>
</div>
<div class="navbar">
<ul class="nav-lists">
<li><a href="https://www.instagram.com/kentarin0528/">instagram</a></li>
<li><a href="https://twitter.com/xNJ3WSx2cWpyZ1a">twitter</a></li>
<li><a href="https://www.facebook.com/profile.php?id=100008159177036">facebook</a></li>
</ul>
</div>
</header>
<div class="contents">
<div class="first-view">
<img src="images/0000.JPG" alt="トップ画面" class="top-image">
<img src="images/0001.JPG" alt="トップ画面" class="top-image2">
</div>
<div class="upper-content">
<h2 class="heading-name"></h2>
<ul class="messages">
<li class="message">
<div class="top">History</div>
</li>
<li class="message">
<div class="message-date">1995/5/28</div>
<div> 👨藤岡健太👨<b>誕生！！</b></div>
</li>
<li class="message">
<div class="message-date">2002/3/15</div>
<div>鈴ヶ森めばえ幼稚園<b>卒業！！</b></div>
</li>
<li class="message">
<div class="message-date">2008/3/20</div>
<div>品川区立浜川小学校<b>卒業！！</b></div>
</li>
<li class="message">
<div class="message-date">2011/3/20</div>
<div>品川区立鈴ヶ森中学校 <b>卒業！！</b></div>
</li>
<li class="message">
<div class="message-date">2014/3/15</div>
<div>東京都立六郷工科高校<b>卒業！！</b></div>
</li>
</ul>
</div>
<video src="My Movie 2.mov" controls class="video"></video>
</div>
<div class="middle-content">
<h2 class="heading-name">Collection</h2>
<ul class="stylist-list">
<li>
<img src="images/baby1.JPG" alt="baby1" class="stylist-image">
<h4 class="stylist-name">👶Baby👶</h4>
</li>
<li>
<img src="images/kids2.JPG" alt="kids2" class="stylist-image">
<h4 class="stylist-name">👦Kids👦</h4>
</li>
<li>
<img src="images/brother1.JPG" alt="brother1" class="stylist-image">
<h4 class="stylist-name">👬Brother👫</h4>
</li>
</ul>
</div>
<div class="bottom-content">
<form class="contact-form">
</form>
</div>
</div>
<footer>
</footer>
</body>
</html>
CSS
body {
font-size: 14px;
color: #333;
margin: 0 auto;
}
h1,h2,h3,h4,h5,h6,p {
padding: 10px 0;
margin: 0;
}
ul,li {
padding: 0;
margin: 0;
}
header {
height: 50px;
background-color: #f0f0f0;
padding: 10px 0;
display: flex;
}
.heading{
width: 50%;
margin-left: 30px;
}
.navbar {
width: 50%;
padding: 20px;
}
.nav-lists {
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
li {
list-style: none;
}
.title{
font-family: 'Creepster', cursive;
}
.contents {
background-color: white;
}
.first-view{
height: 60vh;
display: flex;
justify-content: space-between;
}
.top-image {
height: 500px;
width: 700px;
}
.top-image2 {
height: 500px;
width: 700px;
margin-left: 10px;
}
.heading-name{
font-size: 100px;
color: rgba(10, 173, 223, 0.815);
font-family: 'Creepster', cursive;
margin-left: 340px;
}
.upper-content{
height: 450px;
margin: 0 160px;
}
.messages {
width: 50vw;
margin: 0 auto;
}
.message {
display: flex;
font-size: 18px;
margin: 0 0 16px 70px;
margin-left: 180px;
margin-top: 20px;
}
.message-date {
padding-right: 40px;
}
.middle-content{
height: 450px;
margin: 0 160px;
}
.bottom-content {
height: 200px;
margin: 0 160px;
display: flex;
justify-content: center;
align-items: center;
}
footer {
height: 50px;
background-color: #f0f0f0;
text-align: center;
color:#f0f0f0;
}
.stylist-list {
display: flex;
justify-content: space-around;
margin: 60px 0;
}
.stylist-image {
height: 300px;
}
.stylist-name {
font-size: 16px;
text-align: center;
}
.video{
height: 600px;
width: 800px;
margin-left: 330px;
margin-bottom: 70px;
}
.top{
font-size: 100px;
color: goldenrod;
font-family: 'Creepster', cursive;
}
自分で試したこと
拡張子が小文字だったので大文字に変更したがダメだった
0 likes
