2017-02-16 31 views
0

Изображения для раздела моего сайта не загружаются при загрузке файлов. Когда я проверяю их на месте, все работает нормально. Я получаю этот код ошибки в консоли js.HTML/CSS/JS Изображения не загружаются Online

Не удалось загрузить ресурс: сервер ответил со статусом 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>

+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" альт = "Джон">

Правильное Имя Источник изображения: Джон (JPEG) код: img src = "images/John.jpg" alt = "John">

Странно, что он работает только локально, но не в Интернете.

0

Пожалуйста, проверьте настройки доступа к папке с изображениями и его содержимое. Возможно, вам необходимо установить доступ для чтения ко всем на сервере, где он не работает.

0

Здесь каждая вещь идеальная, но единственная проблема заключается в теге img. Ниже -

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

Вы даете неправильный путь для Учредитель - Джон

0

попробуйте использовать абсолютный адрес для изображения. определите константу с базовым URL вашего сайта. Если ваш сайт находится в php, вы можете сделать это.

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

затем используйте его с собой, как это.

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

Это также хороший выбор, так как вам нужно определить только один раз, и у вас всегда будет правильный путь к файлу.

 Смежные вопросы

  • Нет связанных вопросов^_^