2017-02-16 15 views
0

ファイルをアップロードすると、自分のサイトの一部の画像が読み込まれません。私はそれらをローカルにチェックするとすべて正常に動作します。私はjsコンソールでこのエラーコードを取得します。HTML/CSS/JS画像がロードされていません。

は、リソースの読み込みに失敗しました:サーバーは、404の状態(見つかりません)と答え

をこれが唯一の同じセクションに6つのイメージに起こります。他のすべての画像はうまくロードされます。私はパスをチェックして、それは問題ではないようです。私は3つの300x200イメージを例として追加し、3つのイメージを同じにしました。

/*------ Basic Setup ------*/ 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background-color: white; 
 
    color: #fff; 
 
    font-family: 'Raleway', 'Lato', 'Arial', sans-serif; 
 
    font-weight: normal; 
 
    font-size: 20px; 
 
    text-rendering: optimizeLegibility; 
 
    overflow-x: hidden; 
 
} 
 

 
.clearfix { 
 
    zoom: 1 
 
} 
 

 
.clearfix:after { 
 
    content: '.'; 
 
    clear: both; 
 
    display: block; 
 
    height: 0; 
 
    visibility: hidden; 
 
} 
 

 
.row { 
 
    max-width: 1140px; 
 
    margin: 0 auto; 
 
} 
 

 

 
/*------ Dividers ------*/ 
 

 
.divider { 
 
    width: 25%; 
 
    height: 30px; 
 
    border-bottom: 1px solid rgba(89, 89, 89, 0.65); 
 
    text-align: center; 
 
    margin: auto; 
 
    margin-bottom: 4%; 
 
} 
 

 
.divider span { 
 
    font-size: 200%; 
 
    background-color: white; 
 
    padding: 0 10px; 
 
} 
 

 

 
/*------ Team Section ------*/ 
 

 
.team { 
 
    background-color: white; 
 
    padding-bottom: 1%; 
 
} 
 

 
.team-content { 
 
    color: grey; 
 
    text-align: center; 
 
} 
 

 
.team h1 { 
 
    margin-bottom: 0; 
 
} 
 

 
.team .description { 
 
    margin-top: -2.5%; 
 
    margin-bottom: 4%; 
 
} 
 

 
.team-pics { 
 
    margin-bottom: 2%; 
 
} 
 

 
.team-content p { 
 
    padding-left: 5%; 
 
    padding-right: 5%; 
 
}
<html> 
 

 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <link rel="stylesheet" href="css/normalize.css"> 
 
    <!--Favicon--> 
 
    <link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png"> 
 
    <link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png" sizes="32x32"> 
 
    <link rel="icon" type="image/png" href="images/favicons/favicon-16x16.png" sizes="16x16"> 
 
    <link rel="manifest" href="images/favicons/manifest.json"> 
 
    <link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#5bbad5"> 
 
    <meta name="theme-color" content="#ffffff"> 
 
    <!--Favicon--> 
 
</head> 
 

 
<body> 
 
    <section class="team" id="team"> 
 
    <div class="team-content"> 
 
     <h1>Our Team</h1> 
 
     <div class="divider d2"> 
 
     <span><i class="fa fa-paw" aria-hidden="true"></i></span> 
 
     </div> 
 
     <div class="col-lg-12 description"> 
 
     <p>The German Shepherd Foundation is comprised of people with so much passion for German Shepherds.</p> 
 
     <p>You will not find any other orginazation with our passion and expertise.</p> 
 
     </div> 
 
     <div class="row team-pics"> 
 
     <div class="col-xs-6 .col-sm-6 col-md-6 col-lg-4"> 
 
      <img src="images/john.jpg" alt="John" class="img-responsive"> 
 
      <p>Founder - John</p> 
 
     </div> 
 
     <div class="col-xs-6 .col-sm-6 col-md-6 col-lg-4"> 
 
      <img src="images/sam.jpg" alt="Sam" class="img-responsive"> 
 
      <p>Head of Puppy Care - Sam</p> 
 
     </div> 
 
     <div class="col-xs-6 .col-sm-6 col-md-6 col-lg-4"> 
 
      <img src="images/adam.jpg" alt="Adam" class="img-responsive"> 
 
      <p>Veterinarian - Adam</p> 
 
     </div> 
 

 

 
     <div class="col-xs-6 .col-sm-6 col-md-6 col-lg-4"> 
 
      <img src="http://www.pestworld.org/media/1030/300x200.gif" alt="Blair" class="img-responsive"> 
 
      <p>Transtion Specialist - Blair</p> 
 
     </div> 
 
     <div class="col-xs-6 .col-sm-6 col-md-6 col-lg-4"> 
 
      <img src="http://www.pestworld.org/media/1030/300x200.gif" alt="Jack" class="img-responsive"> 
 
      <p>Grooming Expert - Jack</p> 
 
     </div> 
 
     <div class="col-xs-6 .col-sm-6 col-md-6 col-lg-4"> 
 
      <img src="http://www.pestworld.org/media/1030/300x200.gif" alt="Tammy" class="img-responsive"> 
 
      <p>Dietitian - Tammy</p> 
 
     </div> 
 

 
     </div> 
 
     <div class="col-lg-12 description"> 
 
     <br><br><br> 
 
     <p>Intrested in joining our crack team of dog experts?</p> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</body> 
 

 
</html>

+0

これは実際に実際のsrcではありませんか? - > src = "images/john.jpg" – kdyz

+0

URLを再度確認してください。 '' images/sam.jpg ''の代わりに '' /images/sam.jpg "'ではないかどうか確認してください。 –

+0

オリジナルは次のようなものです:http://prntscr.com/e9c8s3 – Isaiah

答えて

0

問題を修正しました。ソース画像の大文字化が問題でした。

間違っ ソースイメージ名:ジョン(JPEG) コード:IMG SRC = "画像/ John.jpg" ALT = "ジョン">

正しい ソースイメージ名:ジョン(JPEG) コード: img src = "images/John.jpg" alt = "John">

これはローカルでしか動作しませんが、オンラインでは動作しません。

0

画像フォルダとその内容のアクセス設定を確認してください。 おそらく、動作していないサーバー上のすべてのユーザーに対して読み取りアクセス権を設定する必要があります。

0

ここではすべてのことが完璧ですが、唯一の問題はimgタグです。下記を参照してください - ジョン

0

画像への絶対アドレスを使用してみてください -

<img src="Specific Path" alt="John">

あなたは 創設者のために間違ったパスを与えます。サイトのベースURLで定数を定義します。 あなたのサイトがPHPの場合は、このようにすることができます。

define('base_url','http://example.org/'); 

このような画像を使用してください。

<img src="<?=base_url."absoulutepath/file.jpg"?>"> 

これは、1回だけ定義する必要があり、常に正しいファイルへのパスを持つため、良い選択です。

関連する問題