Las imágenes de una sección de mi sitio no se cargan cuando subo los archivos. Cuando los reviso localmente, todo funciona bien. Me sale este código de error en la consola js.

Error al cargar el recurso: el servidor respondió con un estado de 404 (no encontrado)

Esto solo sucede con seis imágenes en la misma sección. Todas las otras imágenes se cargan bien. He comprobado el camino y ese no parece ser el problema. Agregué tres imágenes de 300x200 como ejemplo y mantuve 3 imágenes iguales.

/*------ 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
Isaiah 16 feb. 2017 a las 07:42

4 respuestas

La mejor respuesta

Solucionado el problema. La capitalización de la imagen de origen fue el problema.

Nombre de imagen de origen incorrecto: john (jpeg) Código: img src = "images / John.jpg" alt = "John">

Nombre correcto de la imagen de origen: John (jpeg) Código: img src = "images / John.jpg" alt = "John">

Es extraño que funcione solo localmente así, pero no en línea.

0
Isaiah 16 feb. 2017 a las 09:41

Intente usar la dirección absoluta de la imagen. defina una constante con la url base de su sitio. Si su sitio está en PHP, puede hacerlo así.

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

Luego úsalo con imágenes como esta.

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

Esta también es una buena opción, ya que solo necesita definirla una vez y siempre tendrá la ruta correcta al archivo.

0
prabhjot 16 feb. 2017 a las 06:08

Aquí todo es perfecto, pero el único problema está en la etiqueta img. Vea abajo -

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

Le das un camino equivocado al Fundador - John

0
Rifat 16 feb. 2017 a las 05:36

Verifique la configuración de acceso de la carpeta de imágenes y su contenido. Probablemente necesite configurar el acceso de lectura para todos en el servidor donde no funciona.

0
Sushant 16 feb. 2017 a las 05:35