HTML-img-Tag wird verwendet, um Bilder auf der Webseite anzuzeigen. Das HTML-img-Tag ist ein leeres Tag, das nur Attribute enthält. Schließende Tags werden im HTML-Bildelement nicht verwendet.

Sehen wir uns ein Beispiel für ein HTML-Bild an.

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 

Ausgabe:

abstrakte Klasse in Java

Attribute des HTML-img-Tags

src und alt sind wichtige Attribute des HTML-img-Tags. Alle Attribute des HTML-Bild-Tags sind unten aufgeführt.

1) src

Es handelt sich um ein notwendiges Attribut, das die Quelle oder den Pfad des Bildes beschreibt. Es weist den Browser an, wo er auf dem Server nach dem Bild suchen soll.

Der Speicherort des Bildes kann sich im selben Verzeichnis oder auf einem anderen Server befinden.

2) alles

Das Alt-Attribut definiert einen alternativen Text für das Bild, falls es nicht angezeigt werden kann. Der Wert des Alt-Attributs beschreibt das Bild in Worten. Das Alt-Attribut gilt als gut für SEO-Interessenten.

3) Breite

Es handelt sich um ein optionales Attribut, mit dem die Breite für die Anzeige des Bildes angegeben wird. Es wird jetzt nicht empfohlen. Sie sollten CSS anstelle des width-Attributs anwenden.

4) Höhe

Es ist h3 die Höhe des Bildes. Das HTML-Höhenattribut unterstützt auch Iframe-, Bild- und Objektelemente. Es wird jetzt nicht empfohlen. Sie sollten CSS anstelle des Höhenattributs anwenden.

Verwendung des Höhen- und Breitenattributs mit dem img-Tag

Sie haben gelernt, wie Sie ein Bild in Ihre Webseite einfügen. Wenn wir nun dem angezeigten Bild entsprechend unseren Anforderungen eine gewisse Höhe und Breite zuweisen möchten, können wir dies mit den Höhen- und Breitenattributen des Bildes festlegen.

Fehler: Hauptklasse konnte nicht gefunden oder geladen werden

Beispiel:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Ausgabe:

Hinweis: Versuchen Sie immer, das Bild mit Höhe und Breite einzufügen, da es sonst bei der Anzeige auf der Webseite flackern kann.

Verwendung des Alt-Attributs

Wir können das Alt-Attribut mit verwenden Etikett. Für den Fall, dass das Bild nicht im Browser angezeigt werden kann, wird ein alternativer Text angezeigt. Es folgt das Beispiel für das Alt-Attribut:

Java-Lambda

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Ausgabe:

Wie erhalte ich ein Bild aus einem anderen Verzeichnis/Ordner?

Um ein Bild in Ihr Web einzufügen, muss dieses Bild in demselben Ordner vorhanden sein, in dem Sie die HTML-Datei abgelegt haben. Wenn das Bild jedoch in einem anderen Verzeichnis verfügbar ist, können Sie wie folgt auf das Bild zugreifen:

In der obigen Anweisung haben wir das Bild auf der lokalen Festplatte E------>Bilderordner------>img/html-tutorial/39/html-image-2.webp abgelegt.

Hinweis: Wenn die Quell-URL falsch ist oder falsch geschrieben ist, wird Ihr Bild nicht auf der Webseite angezeigt. Versuchen Sie daher, die richtige URL einzugeben.

Verwenden als Link markieren

Wir können ein Bild auch mit einer anderen Seite verlinken oder ein Bild als Link verwenden. Um dies zu tun, setzen Sie Tag innerhalb der Etikett.

Beispiel:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 

Ausgabe:

Unterstützende Browser

Element	Chrom	IE	Feuerfuchs	Oper	Safari
	Ja	Ja	Ja	Ja	Ja