Wieso werden die Bilder in meine HTML Code nicht angezeigt?

Hi, Ich bin Schüler und fange Grade mit Programmieren an. Ich weiß wie man eine Website erstellt und habe probiert eine Website mit zwei Bildern zu erstellen. Ich habe den Code erstellt aber die Bilder werden nicht auf der Website angezeigt. Ich habe schon recherchiert wie man dieses Problem lösen kann jedoch habe ich keine Lösung gefunden. Der Pfad kann nicht falsch sein ich habe ihn aus meinem Dateimanager kopiert. Ich habe einen validator benutzt jedoch habe ich keine Probleme bei meinen Bildern angezeigt bekommen. Es wäre super wenn mir jemand eine Lösung geben könnte!

Hier ist mein Code:

<!DOCTYPE html>

<head>

<title>peepos</title>

</head>

<body>

</body>

</html>

3 Antworten

NorbertWillhelm

15.11.2024, 21:25

Ich würde dir empfehlen einen relativen Pfad zu benutzen und das Bild in dasselbe Verzeichnis wie deine Htmldatei zu tun.

Absolute Pfade scheinen so nicht zu funktionieren.

Ja, du verwechselst etwas. Ein relativer Pfad wäre, wenn du eine Bilddatei im selben Verzeichnis wie die Htmldatei liegen hast, einfach der Name der Bilddatei als Wert des src-Attribut des image in der Htmldatei benutzen würdest.

Ein Indiz, dass der Pfad im Wert des img-Attributs deines geposteten Quelltextes ein absoluter Pfad ist, ist, dass der Pfad mit einem / für das Wurzelverzeichnis beginnt.

Woher ich das weiß:Hobby

jakobk156

Beitragsersteller

15.11.2024, 21:27

Aber ist das nicht ein Relativer Pfad? Oder verwechsel ich das?

NorbertWillhelm

15.11.2024, 21:31

@jakobk156

Bearbeitet.

jakobk156

Beitragsersteller

16.11.2024, 00:23

@NorbertWillhelm

Ich hab's jetzt ausprobiert aber die Bilder werden immernoch nicht angezeigt. Gibt es noch etwas was ich probieren könnte?

NorbertWillhelm

16.11.2024, 07:17

@jakobk156

Ich weiß leider nicht.

SpezialAntwort

16.11.2024, 18:16

@NorbertWillhelm

Du kannst noch mal versuchen ein "." nach dem Anführungszeichen einzufügen, um das relativ zu gestalten: src="./storage/emul(...)". Vielleicht klappt dann zumindest das zweite Bild.

GamersGame

16.11.2024, 06:03

Schau mal was in der Konsole im Browser steht. Bei Chrome F12.

Wie führst du die Datei aus? Wenn du die Datei einfach so in den Browser ziehst geht es nicht, dann nimmt er C:/ als Root Pfad, du brauchst einen "Webserver" dafür.

Wenn du Visual Studio Code benutzt kannst du Live Server als Extension installieren

SpezialAntwort

16.11.2024, 12:51

Erste Ressource hat ungültige Angaben. "," (Kommata) sind nicht erlaubt.

Bei der zweiten kann ich nur vermuten, dass die Pfadangabe und der tatsächliche Speicherort nicht übereinstimmen. Groß- und Kleinschreibung ist bei Datei- und Verzeichnisnamen von Bedeutung.

Ähnliche Beiträge

Code Beginner;hILFE?

So, ich habe vor kurzem angefangen zu "programmieren" mit HTML. Jedoch habe ich ein Problem. Aus irgendeinem Grund (den ich nicht verstehe) wird mein Code nicht richtig geused bzw. habe ich einen Fehler den ich nicht sehe, denn beim Anzeigen des Cods werden zwei anstatt ein Button angezeigt, ausserdem verstehe ich nicht wieso mein Link nicht funkioniert. Ich habe meinen Code hier rein kopiert und hoffe auf Hilfe.

-------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
  <head>
    <h1><strong>Get FREE Brawl Stras Gems</strong><h1>
      <img src="https://www.linkedin.com/pulse/stepbrawl-stars-gems-coins-generator-without-sq9rc">
  </head>
  <body>
    <p><em>Click here to get FREE Brawl Stars Gems!</em><br>Or click on the Link if the Button doesntt work.</br></p1>
    <button>FREE GEMS<button>
<a href= "https://www.linkedin.com/?trk=article-ssr-frontend-pulse_nav-header-logo">
  <!-- Ja, ich habe es auf Englisch geschrieben. :)>
  
  
  
  </body>
</html>

...zum Beitrag

webdesign und grafik?

programmiert man da websites oder erstellt man das ohne zu programmieren als webdesigner

...zum Beitrag

HTML- falscher Dateipfad, wenn ich html-datei auf Browser öffne :(?

Hallo,

mein Order hat den Dateipfad ''/home/zara/Schreibtisch/Code'' (darin HTML-datei und ein Bilderordern)

wenn ich aber die HTML Datei im Browser öffne wird in der Addresszeile der Pfad ''file:///run/user/1000/doc/7b8bb7e5/index.html'' angezeigt :-((.

Meine Bilder für die Website habe ich aber im ersten Pfad. Im zweiten Pfad ist nur die HTML Datei und ich weis NICHT wie der Ordner mit dem zweiten Pfad überhaupt entstanden ist. Ich kann den Ordner nicht löschen, würde eh nichts bringen. Den Inhalt löschen bringt auch nichts, dann ist es gelöscht und die HTML funktioniert nicht mehr auf dem browser, auch wenn ich diese HTML im und aus dem ersten Ordner des ersten Pfades öffne, so wie ich es will. Wenn ich den Inhalt des zweiten Ordners mit dem zweiten Pfads lösche, passiert nichts im ersten Ordner (HTML und Bilderordner bleiben erhalten) den ich selber angelegt habe und auch nutzen will.

Ich habe nicht versucht das Bild in den zweiten Ordner zu packen(es würde bestimmt funktionieren),weil ich diesen Ordner nicht haben möchte.

Es ist so, dass ich auf meinem Desktop (Schreibtisch genannt(Linux Ubuntu) ) einen Ordner ''Code'' und darin die index.html datei und ein Order ''Bilder'' mit einem Bild.

Ich habe die Tags und den Code richtig geschrieben denke ich (<img src="bilder/header.jpg"> oder <img src="header.jpg"> und trotzdem wird das bild nicht angezeigt, WEIL das Bild NUR im ersten Ordner mit meinem Pfad vorhanden ist aber nicht im selbständig erstellten Ordner, den ich löschen will aber nicht kann. In diesem zweiten Ordner befindet sich die HTML datei die ich dorthin niemals gespeichert hatte, aber das Bild fehlt. Und wie oben beschrieben, wenn ich die HTML datei aus dem ersten ordner öffne, wird diese aber aus dem zweiten ordner geöffnet.

Ich bin ein Wirrkopf und kann mich schlecht ausdrücken, ich hoffe man versteht was für ein Problem ich habe :)danke schonmal.

Achja, ich will wissen, wie bekomme ich den Browser dazu, dass er die HTML, die ich im ersten Ordner anklicke, auch aus diesem Ordner heraus öffnet und diesen Pfad auch anzeigt?

...zum Beitrag

Website für ein Kunden erstellt/ programmieren, wie bekommt er sie?

Ich habe für ein Kunden eine Website homepage erstellt, wie gebe ich sie Von meinem laptop zu im also im zum besitzer machen. Oder soll ich sie über mich laufen lassen. Es ist für ein gym, da sind halt kontakt vom gym, terminbuchung, abozahlung ist vorort

...zum Beitrag

Kennt jemand ein Programm/Website wo zwei Leute gleichzeitig am selben Code programmieren?

Wir sind zu zweit und wollen eine Website mit HTML programmieren

...zum Beitrag

HTML Taschenrechner?

Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen

<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>

...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

Bild als Cursor verwenden bei HTML?

also, wir müssen eine Website für ein Schulprojekt programmieren (IT-Schule) und ich wollte für den Vibe ein Image als Cursor einfügen. Auf mehreren Websites (und auch Chat GPT) hat es mir Code Beispiele gegeben, bzw war das eh immer derselbe, aber es funktioniert halt nd.

das wäre jz mein CSS bis jetzt,

und das zeigt es mir im Browser in der Konsole an (ich verwende Firefox), also der Code kann ja auf das Bild zugreifen.

Was ist das jetzt das Problem?

...zum Beitrag

Website Logo zeigt aderen Font an als es eigentlich ist?

Ich habe ein Logo in Photoshop als svg Datei mit dem font „Sofia“ erstellt. Als ich nun das Bild bzw. Logo in meinem HTML Code hinzugefügt habe, sah ich auf der Website das die Schrift Art nicht dieselbe ist, wie auf dem Bild. Wie kann das sein und wie löse ich das Problem?

...zum Beitrag

Website programmieren?

Moin moin,

Ich habe mich mal wieder ans programmieren gewagt und bin dabei meine eigene Website zu coden. HTML, JavaScript, CSS sind die Programmiersprachen. Ich frage mich jetzt nur, wie ich die Sprachen zusammenfügen kann zu einer Website. Von mir aus könnt ihr auch irgendeinen Hoster nennen. Hauptsache ich kann da selber coden und habe nicht irgendeinen Websitebaukasten. Der Preis ist egal.

Euch allen noch einen wunderschönen Abend :)

...zum Beitrag

VS-Code findet Datei zum compilieren im Pfad nicht obwohl der Pfad der im Dateimanager kopierte Pfad zur Datei ist?

Hi, ich lern gerade Programmieren in VS-Code und habe mir als erste Sprache C ausgesucht. Ich versuche jetzt seit gut zwei Tagen, mein erstes kleines miniprogramm was schon automatisch da steht, zum laufen zu bringen, allerdings klappt da etwas nicht, vscode findet nähmlich die datei im angegeben Pfad nicht und spuckt mir immer wieder diese Fehlermeldung im Ausgabe Bereich aus (Bild1) wenn ich es versuche mit code runner zu starten

[Running] cd "c:\Users\LaughBoy\programmieren mit c\" && gcc zweiter_versuch.c -o zweiter_versuch && "c:\Users\Jojo\programmieren mit c\"zweiter_versuch

gcc: error: CreateProcess: No such file or directory

vorher hab ich schon noch den complier MinGW runtergeladen, weil vorher der complier komplett gefehlt hat, damit habe ich dann versucht die datei zu kompilieren und zwar im Terminalbereich mit powershell, da bekomm ich aber immer diese Fehlermeldung:

PS C:\Users\Jojo\programmieren mit c> gcc -o erster_code "C:\Users\Jojo\programmieren mit c\erster_code"

gcc.exe: error: C:\Users\Jojo\programmieren mit c\erster_code: No such file or directory

gcc.exe: fatal error: no input files

compilation terminated.

[Done] exited with code=1 in 0.074 seconds

ich bin mittlerweile komplett verwirrt und freue mich über Hilfe ich probier auch gerne was anderes von ganz vorne aus falls es an MinGW liegt, hauptsache ich kann endlich Anfangen mit C zu programmieren. Danke im vorraus.

Lg. LaughBoy

...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

Wie kann ich eine WordPress-Kommentar-Sektion zu meinem individuellen Theme hinzufügen?

Ich habe eine individuelle Website mit Webflow erstellt und dann den HTML- und CSS-Code kopiert, um ihn als Grundlage für mein individuelles WordPress-Theme zu verwenden. Das Theme unterstützt jedoch keine Kommentar-Plugins wie WP Disquz oder das grundlegende WP-Kommentarformular. Was sollte ich tun, um eine Kommentar-Sektion auf meiner Website zu aktivieren?

Sollte ich den Kommentar-Sektions-Code direkt in die HTML- und CSS-Dateien meines individuellen Themes einfügen oder gibt es einen anderen Code, den ich zu den Theme-Ordnern hinzufügen kann, um Kommentar-Plugins und das WP-Kommentarformular zu unterstützen?

ihr könnt euch auch gerne den code der website anschauen

https://germanpoems.org/

...zum Beitrag

CSS Hintergrundbild wird nicht angezeigt?

Ich mache grade eine Website, bei der oben im Header ein Hintergrundbild hinter dem Text stehen soll. Habe also ein div erstellt, eine Klasse gegeben und eine Höhe festgelegt. Wenn ich eine Hintergrundfarbe dort haben will, klappt es einwandfrei. Aber wenn ich ein background-image dort haben möchte, wird es im Browser einfach nicht angezeigt. Der Pfad stimmt, hab ihn schon mehrfach kontrolliert.

Wenn ich auf "untersuchen" klicke im Browser, wird auch dort im Code angezeigt, dass an der Stelle ein Hintergrundbild ist. Aber es wird einfach nicht angezeigt. Keine Ahnung, woran es liegt. Kann mir bitte jemand helfen?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen