Bild taucht nicht auf Website auf was mach ich falsch?

Hi ich habe folgendes Problem mit html5

nehmen wir an meine website heißt website.de

Wenn ich jetzt folgenden code schreibe:

dann klappt das ganze wunderbar LOKAL.

wenn ich aber folgende zeile schreibe:

und natürlich die html speichere und das logo so wie die

html auf den webserver lade, dann erscheint nur der alt text "logo"

d.h. das bild ist nicht zu sehen.

Was mache ich falsch ?

P.S.: ja das logo ist auch im richtigen ordner. es spielt keine rolle ob ich es in den image ordner

meines servers speichere oder direkt in die root.

Vielen Dank im Vorraus !

5 Antworten

siliciumcarbid3

23.02.2024, 14:43

Du kannst Pfade absolut und relativ formulieren. Kennst du diesen Unterschied?

Absolut = Der komplette Pfad, mit dem man deine Datei von überall her finden kann. Sozusagen..

Relativ = Das System weiß bereits, dass es sich auf website.de befindet oder in einem bestimmten Verzeichnis (website.de/ordner1).
Dann kann der Pfad auch relativ eingegeben werden.

Es ist nun relevant zu wissen, wo dein Bild ist. Du hast ja das Stammverzeichnis, in dem sich deine index.html/ index.htm, index.php (oder ähnlich) befindet. Ist dein Bild im gleichen Verzeichnis, wie diese index-Datei?

Wenn ja: Dann kannst du den img-Tag so schreiben:

<img src="logo.jpg" alt="Logo PJay-Vee">

Das ist ein relativer Pfad. Das System weiß, dass es sich auf website.de befindet und sucht im Stammverzeichnis nach logo.jpg.

Was du im zweiten Beispiel gemacht hast, ist ein absoluter Pfad. Das geht natürlich auch und wie andere sagen, fehlt evtl. ein http(s) und evtl. muss man das www. weglassen. Das ist von der Konfiguration deines Webservers abhängig. Wenn du nicht weißt, wie es eingestellt ist, musst du ausprobieren:

http://website.de/logo.jpg
https://website.de/logo.jpg
http://www.website.de/logo.jpg
https://www.website.de/logo.jpg

Eines davon müsste gehen. Die relative Methode finde ich persönlich angenehmer. Absolut benutze ich nur, wenn ich ein Bild von einer anderen Website anzeigen möchte.

Es könnte ebenfalls sein, dass deine Dateiendung nicht stimmt. Prüfe noch einmal, ob dein Bild tatsächlich mit .jpg endet. Ein häufiger Fehler ist, dass eine Datei mit Großbuchstaben endet - also .JPG. Oder auch .jpeg, .JPEG oder auch überhaupt ein anderes Format, wie .png oder .gif.

Cazumo393

Beitragsersteller

23.02.2024, 20:00

Vielen Dank ! Das hat's gebracht. super danke nochmals ! AUCH an alle Anderen DANKE !

siliciumcarbid3

23.02.2024, 20:02

@Cazumo393

Was genau wars jetzt tatsächlich?

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

23.02.2024, 16:29

Bei der Online-Version hast du vergessen auch den 'images' Ordner mit indem Pfad anzugeben. Das könnte dazu führen dass das Bild nicht gefunden werden kann.

Versuche mal den Pfad anzupassen und schaue auch ob die Dateien auch richtig liegen. Dann müsste es funktionieren.

PS: Du hast in der Online-Variante einen absoluten Pfad angegeben. Du kannst aber auch wie in der lokalen Variante einen relativen Pfad online verwenden.

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

BeamerBen

23.02.2024, 13:17

Schau in deine dev tools unter Network welcher Pfad auf dem Server aufgerufen wird. Vermute das wird einfach irgendein Pfad Problem sein.

Und dann schau, liegt es am HTML und du nutzt zb. Ausversehen einen relativen Pfad der auf einen falschen Ordner zeigt.

Oder der Webserver routed die request nicht zu dieser Ressource aus irgendwelchen Gründen.

JMC01

23.02.2024, 13:18

Die Pfadangabe muss natürlich vollständig und korrekt sein. Eventuell klappts mit http:// ... davor besser. Das gilt aber auch für den Dateinamen.

logo.jpg, Logo.jpg und logo.JPG sind drei verschiedene Dateinamen. Welcher davon stimmt, weißt nur du.

BoeseKatze5992

23.02.2024, 13:26

Du musst darauf achten dass sich das Bild im selben Ordner befindet wie das html Dokument

Cazumo393

Beitragsersteller

23.02.2024, 19:52

hab ich ! trotzdem nix

BoeseKatze5992

24.02.2024, 09:21

@Cazumo393

schick villeicht mal dein dokument rein

BoeseKatze5992

24.02.2024, 09:25

@BoeseKatze5992

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Test

</h1>

</body>

</html>

BoeseKatze5992

24.02.2024, 09:26

@BoeseKatze5992

Das wäre das dokument

Ähnliche Beiträge

Wie kann man ein festes Bild über einem div oder header in css anzeigen lassen ohne, dass es sich in diesem Container befindet?

Hallo,

ich bin aktuell dabei meine eigene kleine Website mit HTML und CSS zu gestalten und bin auf ein Problem gestoßen. Ich möchte mein Logo über einem Header oder Div anzeigen wie es unten auf dem Bild auch gezeigt ist. Ich habe versucht das Bild in den Container zu verschieben und dann versucht es mit den Display Typen flex und grid zu positionieren. Leider wird entweder das Bild an eine falsche stelle verschoben oder meine Links werden falsch positioniert (Siehe Bild 2). Hat jemand eventuell eine Lösung wie ich das mache ohne das Bild in den Container zu verschieben oder das Bild obwohl es in dem Container ist statisch zu positionieren, ohne dass es von den Positionen der Links beeinflusst wird.

...zum Beitrag

Website aktualisiert sich nicht richtig xampp?

Folgendes Problem:

Die Verlinkung eines Buttons funktioniert nicht richtig. Ich habe den Quellcode aus einem anderen Script kopiert, bei dem es funktioniert. Dann habe ich alle headers() raus genommen und durch echos ersetzt, um den Fehler zu finden.

Trotzdem verlinkt er mir die Website auch nach Speichern und aktualisieren immer noch und gibt kein echo aus.

Ich bin echt am verzweifeln, was mach ich denn bitte falsch??? Bis grade eben hat es noch ganz normal funktioniert

...zum Beitrag

Image lässt sich nicht in css stylen?

Guten Abend Gutefrage.net - Community!

Ich habe nun schon seit einigen Minuten folgendes Problem mit CSS:

Ich möchte mit einer class ein Icon stylen, da ich mehrmals das gleiche Icon auf der Website verwende. Wenn ich nun aber in das img-tag die class "small_icon" hinzufüge und in css die class so bearbeite, wie ich das Bild brauche, funktioniert es nicht.

Hier der Code:

CSS

HTML

Der Style wird auf der Website einfach nicht verwendet. Weiß jemand warum oder was ich ändern muss, damit das funktioniert?

MfG, Jonas

...zum Beitrag

website html speichern?

hallo,

ich habe folgendes problem. ich habe mein website template über den browser geöffnet. dann wollte ich ein wenig herumspielen und habe bei der Seite mit der (rechtsclick)untersuchen Funktion ein paar sachen im "elements reiter" bearbeitet. jetzt gefällt es mir jedoch so sehr das ich es speichern will. habe aber keine ahnung wie. villeicht kann mir ja da jemand weiterhelfen.

mfg marc

...zum Beitrag

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}

...zum Beitrag

Zweite Sprache mit Js?

Hallo, ich will meine Website zweisprachig machen und die Texte mit Js ändern angepasst an den Nutzer. Meine Frage wäre ob ich dasselbe auch für den Titel, die Description und den href lang tag machen kann, sodass es auch beim suchen übersetzt angezeigt wird, oder muss der JacaScript-Code zuerst geladen werden?

...zum Beitrag

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zum Beitrag

CSS/JS Programmieren dass Link erst klickbar wenn?

Hi, ich schreibe eine Website mit so einem Fragebogen gerade und da gibt es einen Button, der zu einer nächsten HTML Seite weiterverlinkt:

<a href="seite2.html"><div>Weiter</div></a>

Ich möchte aber, dass man erst draufklicken und zur nächsten Seite gelangen kann, wenn vorher eine Auswahl getroffen wurde, also eine Bedingung vorher erfüllt ist.

Ich weiß, dass ich das CSS steuern kann wie einen unsichtbaren Knopf erst sichtbar machen, sobald die Bedingung erfüllt ist. Aber ich hätte den "Weiter Knopf" die ganze Zeit da, nur erst klickbar, sobald die Bedingung erfüllt ist. Der Link ist aber Bestandteil vom HTML nicht vom CSS und deswegen weiß ich nicht wie das geht.

Ich hoffe mir kann jemand weiterhelfen. LG

...zum Beitrag

Stichpunkte mit Html bearbeiten?

Hii ich versuch gerade html zu lernen und will listen machen.

So sieht die Website gerade aus:

Ich möchte das der text von den verschiedenen Stichpunkten verschiedene farben hat also, dass Katze: Lila Hund:Pink Otter:blau. Außerdem möchte ich das die herzen for den Stichpunkten Pfoten sind.

Das ist mein Code:

Wie muss ich den abändern damit das funktioniert?

(Außerdem funktioniert meine Css Datei nicht wäre nett wenn mir da auch wer weiterhelfen könnte)

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Wie Skaliere ich um die Faktoren 2 und 0.5 ohne Glättung bei Javascript?

Kann ich einfach eine function mit ImageScale erstellen und die werte einfügen oder wie gehe ich voran?.

...zum Beitrag

Timer auf Webseite (HTML)?

Wie kann ich in JTML einen Versteckten Tiger stellen, so dass einige Texte erst nach Ablauf des Timers (z.B. 10 sek.) Auftauchen. Der endbenutzer soll davon nichts sehen!

...zum Beitrag

Microsoft Edge zeigt HTML Code nur in html an und nicht so wie´s eig. sein soll?

Wie kann ich das ändern?

Habe das auf Visual Studio Code gemacht.

...zum Beitrag

Hintergrund HTML, CSS Bild?

Hallo zusammen,

ich will das auf meiner Webseite auf der rechten hälfte das Bild ist und auf der linken Seite eine Farbe z.B. Grau, wie kann ich's machen dass sich das rechte bild sich dann zur mitte in die Hintergrundfarbe verläuft?

Danke!

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen