Bild-Datei wird auf Homepage nicht angezeigt (HTML/Programmierung)

Hallo,

ich erstelle gerade eine Homepage für ein Projekt und habe folgendes Problem:

Ich habe png-Dateien (Also Bilder) erstellt, welche als Buttons fungieren sollen. Jedoch werden diese, sobald ich sie einbaue nicht angezeit.

Bsp.:

<p><img src="/images/home.png"></p>

Lade ich das Bild aber auf einen Server hoch, wird es angezeigt.

Bsp.:

<p><img src="http://uploadservice/ordner/images/home.png"></p>

Die Website ist nicht die Erste die ich erstelle, jedoch ist mir dieses Problem noch nie aufgetreten.

Anm.: Lade ich die Homepage auf einen Server hoch (Mit dem Ordner /images/) wird das Bild ebenfalls nicht angezeigt.

Problem ist: Das Projekt ist ein Schulprojekt und ich darf keine Buttons oder Bilder nehmen, die auf einem Server hochgeladen sind.

Ebenfalls habe ich schon probiert, das Bild in keinen "Unterordner" zu stellen (sprich im gleichen Ordner, in welchem auch die index.html-Datei ist). Dies funktioniert jedoch auch nicht.

Danke!

Answer 1

[aurata]

Gerade auch für lokale Projekte ist eine relative Pfadangabe richtig, außer man betrachtet die Seite NUR auf dem eigenen Computer.

Sobald man auf fremden Computer solche Verweise (mit Festplattenangabe - wie vom Giantware vorgeschlagen) angibt, ist man aufgeschmissen!

Zudem ist dein Problem eine Kleinigkeit:

<p><img src="/images/home.png"></p>

Hier ist ein mal Slash am Anfang zu viel (FALSCH), mehr ist das nicht ;-).

Das wäre richtig:

<p><img src="images/home.png"></p>

Weiter: es ist essentiell Groß/Kleinschreibung zu beachten (Dateien UND Ordnername). Wenn das Bild Home.png, oder home.PNG heißt, wird es nicht angezeigt, wenn im Verweis home.png steht. Ebenso wenn der Ordner Images heißt und im Link images steht.

Auf einem Windowsrechner macht das nichts, aber sobald die Dateien auf dem Server sind, kann das Probleme geben.

Weitere Bemerkungen: in dem img-Tag fehlen noch 3 Angaben, nämlich die Breite, Höhe und Alternativtext:

<p><img src="images/home.png" width="100" height="25" alt="Startseite"></p>

Nicht nur im Hinblick auf Barrierefreiheit sind die Angaben wichtig, sondern auch deshalb, damit der Browser gleich den richtigen Platz für die Grafik einräumt.

Comments

[winmopro]

Danke! Genau das war mein Fehler!

Habe diesen durch das ständige Suchen nach dem Fehler total übersehen.

[aurata]

@winmopro

Danke schön für den Stern! :-)

Hilfreich ist es, die Dateien zwischen drin zu validieren, somit entdeckst du auch so manche Tippfehler:

http://validator.w3.org/

In dem Schrägstrich-Fall hätte dir auch der Validator nicht geholfen, aber ansonsten ist das eine tolle Sache, um die Richtigkeit vom Quelltext zu überprüfen.

[Rindschnitzel]

Danke Mann :)

Answer 2

[sl4l0m]

Hallo ich würde dir raten ein html programm zu benutzen ich z.B benutze Nvu dort kansnt du alles hinschreiben auch ohne css oder html kentnisse du kannst auch bilder videos alles rein tuhen den Quelltext kansnt du dann sehen wenn du unten auf quelltext drückst ic hwürde dir raten sowas zu benutzen wenn du also noch anfänger in html kentnisen bist oder google mal vielleicht findest du was besseres Viele Grüsse sl4l0m

Answer 3

[AMutz]

hasd du aufgepasst dass die dateiendung des bildes auch klein geshriebn uist genau so wie im htmlcode?

Answer 4

[bobo4370]

Hallo,

eine kleine Hilfestellung:

Sollte es wie in deinem Beispiel am Pfad liegen, überprüfe ich es in dem ich auf der Homepage, da wo das Bild angezeigt werden sollte, mit der rechten Maustaste klicke, und Eigenschaften wähle. Da siehst du den Pfad wo der Browser das Bild holen möchte, dann fällt dir sowas meistens direkt auf.