Bild in html einfügen

Lowe21 · 18.04.2024

Hallo,

ich möchte gerne ein Bild in ein html Dokument einfügen. Die Dateiendung ist .htm
Ich öffne diese Datei über Microsoft edge (der Typ ist ein Microsoft Edge HTML Dokument), zum editieren verwende ich jedoch Notepad ++ (im Header steht noch utf-8). Die Datei ist Bestandteil eines Programmes, welches darauf zugreift. Der darin enthaltene Text wird auf bestimmten Seiten angezeigt. Es dient als Hilfe bei der Benutzung der Software. Ergänzend zu dem Text möchte ich ein Bild einfügen. Wie das, allgemein bei html, geht ist mir klar. Hier ist der Code den ich verwende:

HTML:

<img src="Image1.jpg" alt="Alternativer Text" width="100" height="200">

html Datei und Bild befinden sich im gleichen Verzeichnis. Das ganze funktioniert aber leider nicht wie gewünscht. In meinem Programm erscheint an der Stelle wo das Bild stehen soll ein roter Rahmen. Die htm Datei selbst hat ein rotes Ausrufezeichen.

Muss die htm Datei übersetzt werden?
Ist der Code wirklich richtig, denn meine Datei endet auf htm und nicht auf html
Spielt die Version eine Rolle? In Bezug auf den Syntax des Codes
Wenn ich die Datei mit Microsoft Edge öffne, dann ist mein Bild zu sehen

Ich würde mich über Tipps sehr freuen

Sempervivum · 18.04.2024

Hallo und willkommen im Forum!

Nein, eine HTML-Datei muss nicht übersetzt werden.
Die Syntax deines HTML ist richtig und das img-Tag gibt es schon ewig ohne dass sich die Syntax geändert hätte.
Wenn es im Edge funktioniert, muss es irgend wie an deinem Programm liegen, dass das Bild dort nicht sichtbar ist. Man müsste in der Doku nachforschen.
Ein einfacher Ansatz, der mit einiger Wahrscheinlichkeit funktionieren dürfte ohne dass man in dieses Programm einsteigt: Das Bild in einen Base64-String konvertieren und diesen als Quelle verwenden.
Konvertieren kannst Du z. B. hier erledigen:
https://base64.guru/converter/encode/image
Das Bild auf deinem lokalen Computer auswählen, dann unter "Output Format" "Data URI -- data:content/type;base64" auswählen und "Encode Image to Base64" drücken. Den generierten String kannst Du dann als scr-Attribut verwenden:

Code:

<img src="hier-der-online-generierte-string" alt="Alternativer Text" width="100" height="200">

Und nicht irritieren lassen, der String kann ziemlich lang sein weil ja das kompletter Bild darin kodiert ist.