HTML/CSS/JS图像未加载在线

我上传文件时，我网站某部分的图像未加载。当我在本地检查它们时，一切正常。我在js控制台中得到这个错误代码。HTML/CSS/JS图像未加载在线

未能加载资源：服务器与404状态响应（未找到）

这只发生到六个图像以相同的部分。所有其他图像加载得很好。我已经检查了路径，这似乎不是问题。我添加了三张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>

来源

2017-02-16 Isaiah

这不是真正的src，是吗？ - > src =“images/john.jpg” – kdyz

再次检查网址。检查它是不是''/images/sam.jpg“'而不是'”images/sam.jpg“'。 –

这是什么原貌看起来像http://prntscr.com/e9c8s3 – Isaiah

修复了这个问题。源图像大小写是问题。

错误源像姓名：John（JPEG）代码：IMG SRC = “图像/ John.jpg” ALT = “约翰”>

正确源图像名称：约翰（JPEG）代码： img src =“images/John.jpg”alt =“John”>

奇怪的是，它只适用于本地，但不在线。

来源

2017-02-16 09:41:35 Isaiah

请检查图像文件夹及其内容的访问权限设置。您可能需要将其设置为无法使用的所有服务器上的读取访问权限。

来源

2017-02-16 05:35:51 Sushant

这里是完美的东西，但唯一的问题是在img标签。见下面 -

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

你给错了路径创始人约翰 -

来源

2017-02-16 05:36:59 Rifat

尝试使用绝对ADRESS的形象。用你网站的基本网址定义一个常量。如果你的网站是在PHP你可以这样做。

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

然后与你一起使用这样的图像。

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

这也是一个不错的选择，因为您只需定义一次，而且您将始终拥有正确的文件路径。

来源

2017-02-16 06:08:36 prabhjot

HTML/CSS/JS图像未加载在线

回答

相关问题