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

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

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

Brauch ich dafür eine http request (javascript back end)?

Also ich hab eine Webseite mit nem input field und einem “senden” button. Sobald man auf senden drückt sollte der Text, den man in den input field geschreiben hat auf einer ganz anderen Seite erscheinen. Um also die Daten zur anderen Website zu schicken bräuchte ich eine http request, richtig?

Das Problem ist, dass ich absolut null Ahnung im Back-end habe und als ich es irgendwie mit Code kopieren versucht habe wurde irgendwas aus Sicherheitsgründen oder so (keine Ahnung) geblockt.

Die beiden Websites hoste ich übrigens mit replit, falls das wichtig ist 😅. Bin aber sehr flexibel und könnte jederzeit wechseln wenn es sein muss.

Mfg Weißbrot

...zum Beitrag

JavaScript: Ist dieser Code nicht unnötig?

Ich programmiere zur Zeit ein Framework und schaue mir zur Inspiration Beispielprojrekte von anderen Frameworks / Bibliotheken an.

Hier hat jemand Flappy Bird mit Pixi programmiert und schrieb folgende Zeilen Code:

// Aliases
const { Application } = PIXI;
const loader = PIXI.Loader.shared;
const { resources } = PIXI.Loader.shared;
const { Sprite } = PIXI;
const { Text } = PIXI;

Ist das nicht eigentlich unnötig? Ich meine, warum nicht einfach immer PIXI.Apl ... schreiben?

...zum Beitrag

Bauksasten vs selber machen?

Was sind die besten Vorteile bei Webseiten wenn man es selber macht mit Html css und js im Gegensatz zu Baukastensystemen? Also ja bei den meisten Baukastensystemen kann man nicht alles umsetzen was man will, aber bei Webflow schon. Da kann man alles machen, was man sich vorstellt. Also wäre die eigentliche Frage, was sind die Vorteile vom Programmieren mit Html css und js, selber hosten und alles selber zu machen zu Webflow? Weil es vielleicht günstiger ist? (Zu erwähnen ist, dass ich nur einfache Webseiten meine, also keine Login System Webseiten keine großen, sondern einfach für Unternehmenswebseiten undso, also Sachen für die man nur einfaches Html css und js braucht.)

...zum Beitrag

javascript Fehler, wtf?

Hab in meinem ganzen 5 Jahren als js dev noch nie so einen Fehler gehabt.

Code:

<!DOCTYPE html>

<head>

</head>

<body>

<button id="login" onclick="save()">login</button>

var name = document.getElementById("name")

var password = document.getElementById("password")

function save() {

alert(name.value, password.value)

}

</script>

</body>

</html>

ich experimentiere in letzter Zeit wieder etwas mit firebase. Hab als test projekt mal zwei inputs mit login button erstellt. So und jetzt gibt diesen html code mal in eine html file ein und führt es aus. Aus irgendeinem Grund wird bei name undefined alerted und der value von password wird wie erwartet alerted. Warum funktioniert das bei password, aber nicht bei name?? Hab schon mehrere code editoren ausprobiert und überall das gleiche Problem. Weiß jmd wo der Fehler ist?

Mfg Weißbrot

...zum Beitrag

html Widget programmieren mit Django Datenbank?

Hallo,

ich habe eine Django Datenbank erstellt, und möchte mein html Widget für meine Webseite damit verwalten. Die Datenbank funktioniert soweit, ich kann Datensätze hinzufügen, bearbeiten und entfernen. Wenn ich den Link in den Browser eingebe wird meine Tabelle im Browser auch mit allen Daten angezeigt und aktualisiert wenn ich in der Datenbank etwas ändere. Bette ich den html code nun aber in meine Webseite ein, wird die Tabelle angezeigt, aber ohne den Inhalten aus der Datenbank. Kann mir bei dem Problem vielleicht jemand helfen.

Vielen Dank schonmal im Voraus.

Das ist der html Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Stil für die gesamte Tabelle */
    table {
      border-collapse: collapse;
      width: 65%;
      margin: 20px auto;
      border: 1px solid #ccc;
      position: relative;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border-right: 1px solid #ccc;
    }
    th {
      background-color: #8B0000;
      color: white;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tr:nth-child(odd) {
      background-color: #ffffff;
    }
    td:last-child {
      border-right: none;
    }
    th:nth-child(1), td:nth-child(1),
    th:nth-child(4), td:nth-child(4) {
      width: 100px;
    }
    td:nth-child(2), th:nth-child(2),
    td:nth-child(3), th:nth-child(3) {
      width: 85px;
    }
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Nächste Veranstaltungen</h1>
  <table>
    <tr>
      <th>Titel</th>
      <th>Datum</th>
      <th>Zeitraum</th>
      <th>Örtlichkeit</th>
    </tr>
    <!-- Schleife für die Anzeige der nächsten drei Veranstaltungen -->
    {% for event in upcoming_events %}
    <tr>
      <td>{{ event.Titel }}</td>
      <td>{{ event.Datum|date:"l, j. F Y" }}</td>
      <td>{{ event.Zeitraum }}</td>
      <td>{{ event.Örtlichkeit }}</td>
    </tr>
    {% endfor %}
  </table>
</body>
</html>

...zum Beitrag

Elemente in css schräg übereinander legen?

Ich habe folgendes Problem:

Ich möchte gerne den weißen Kasten mit dem Text drinnen rechts neben den Kasten mit der Flasche legen, aber die beiden sollen sich so halbwegs überschneiden (Wie in dem einen Beispiel Bild zu sehen)

Das sind mein akuteller HTML und CSS code:

Ich habe auch schon im Internet gesucht und dort steht überwiegend, dass ich was mit der id machen muss, da passiert aber irgendwie nicht das, was ich will... :/

...zum Beitrag

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zum Beitrag

Wie kann ich direkt zur richtigen HTML Seite weiterleiten?

Hallo, wie kann ich dafür sorgen, dass direkt die richtige HTML Datei angezeigt wird, ohne dass ich dafür .html in der Adresse angeben muss bzw. die HTML Datei manuell auswählen muss:

...zum Beitrag

External css funktioniert nicht?

Wenn ich das css in ein styletag mache funktioniert es aber sobald es in der css datei ist funktioniert es nicht mehr

.form {
    margin-top: 10px;
}
.input-field {
    margin-bottom: 10px;
}

(Mit css datei)

(Mit style tag)

...zum Beitrag

Wie diese Funktion mit HTML-Code nachbauen?

Guten Abend zusammen ich programmiere eine kleine Seite und mir ist eine Funktion auf ebay aufgefallen; Wenn ihr auf dir Startseite geht dann gibt es etwas unten eine Art: Werbungsvorschläge. Beispielsweise steht da: Handys und Smartphones und direkt dadrunter befinden sich mehrere Bilder von verschiedenen Produkten. Wenn man darauf klickt wird man dementsprechend weitergeleitet. Rechts und links gibt es eine Pfeiltaste, wenn man sie drückt geht es nach links/rechts und es werden weitere Bilder/Produkte angezeigt. Es geht hierbei um die Funktion: Persönliche Empfehlung bei Ebay. Mir ist bereits bewusst, dass ich eine Scriptsprache brauche. Mir geht es jedoch hierbei nur um die Struktur und nicht um die Funktionen. Ich habe mir gedacht, dass ich diesen Code verwenden könnte: <button>←</button> -> Das ist ein Button mit der Pfeiltaste rechts und ich füge einige Bilder hinzu mit dem Code <img> .

Habt ihr vlt. einen Code mit dem es einfacher geht oder würdet ihr es anders machen. Ich bin dankbar für jede Hilfe und jeden Code :)

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen