HTML/CSS/JS Bilder werden nicht geladen Online

Die Bilder für einen Abschnitt meiner Website werden nicht geladen, wenn ich die Dateien hochlade. Wenn ich sie lokal überprüfe, funktioniert alles gut. Ich bekomme diesen Fehlercode in der js-Konsole.HTML/CSS/JS Bilder werden nicht geladen Online

fehlgeschlagen Ressource laden: der Server mit einem Status von 404 reagiert
(nicht gefunden)

Dies geschieht nur zu sechs Bildern im selben Abschnitt. Alle anderen Bilder laden gut. Ich habe den Pfad überprüft und das scheint nicht das Problem zu sein. Ich fügte drei 300x200 Bilder als Beispiel hinzu und behielt 3 Bilder gleich.

/*------ 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>

Quelle

2017-02-16 Isaiah

Dies ist nicht wirklich die tatsächliche src, oder? -> src = "images/john.jpg" – kdyz

Überprüfen Sie die URLs erneut. Überprüfen Sie, ob es nicht "" /images/sam.jpg "' anstelle von '" images/sam.jpg "' ist. –

Hier ist, was das Original aussieht http://prntscr.com/e9c8s3 – Isaiah

Das Problem wurde behoben. Die Großschreibung des Quellimages war das Problem.

Falsche Quelle Bildname: john (jpeg) Code: img src = "images/John.jpg" alt = "John">

Correct Quelle Bildname: John (jpeg) Code: img src = "Bilder/John.jpg" alt = "John">

Seltsam, dass es nur lokal so funktioniert, aber nicht online.

Quelle

2017-02-16 09:41:35 Isaiah

Bitte überprüfen Sie die Zugriffseinstellungen der Bilder-Ordner und seinen Inhalt. Wahrscheinlich müssen Sie Lesezugriff auf alle auf dem Server einrichten, auf denen es nicht funktioniert.

Quelle

2017-02-16 05:35:51 Sushant

Hier ist alles perfekt, aber das einzige Problem ist img Tag. Siehe unten -

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

Sie geben falschen Weg für Gründer - John

Quelle

2017-02-16 05:36:59 Rifat

versuchen Sie sich mit absoluter Adresse auf das Bild. Definieren Sie eine Konstante mit der Basis-URL Ihrer Site. Wenn Ihre Seite in PHP ist, können Sie das tun.

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

dann verwenden Sie es mit Ihnen Bilder wie folgt.

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

Dies ist auch eine gute Wahl, da Sie nur einmal definieren müssen und Sie immer den richtigen Pfad zur Datei haben werden.

Quelle

2017-02-16 06:08:36 prabhjot

HTML/CSS/JS Bilder werden nicht geladen Online

Antwort

Verwandte Themen