HTML <img> src-Attribut

HTML <img> Tag

Definition und Verwendung

Erforderlich src Attribute bestimmen den URL der Bilder.

Es gibt zwei Methoden, um src URL in den Attributen angeben:

1. Absolute URL - Verknüpfung zu externen Bildern, die auf anderen Websites gehostet werden. Zum Beispiel:

src="https://www.codew3c.com/images/img_girl.jpg"

Hinweis:Externe Bilder könnten urheberrechtlich geschützt sein. Wenn Sie keine Nutzungserlaubnis erhalten, könnte dies gegen das Urheberrecht verstoßen. Außerdem können Sie keine externen Bilder kontrollieren; sie könnten plötzlich entfernt oder geändert werden.

2. Relative URL - Verknüpfung zu Bildern, die auf der Website intern gehostet werden.

Hier beinhaltet die URL keine Domain. Wenn die URL nicht mit einem Schrägstrich beginnt, bezieht sie sich auf die aktuelle Seite. Zum Beispiel:

src="img_girl.jpg".

Wenn die URL mit einem Schrägstrich beginnt, bezieht sie sich auf die Domain. Zum Beispiel:

src="/images/img_girl.jpg".

Hinweis:Es ist vielleicht am besten, relative URLs zu verwenden. Wenn Sie den Domainnamen ändern, wird keine Unterbrechung verursacht.

Hinweis:Wenn der Browser das Bild nicht findet, wird ein defekter Link-Icon und der alt-Text angezeigt.

Hinweis:Um die Speicherung der Dokumente zu organisieren, lagern die Ersteller in der Regel Bilddateien in einem separaten Ordner ab und benennen diese Verzeichnisse normalerweise nach "pics" oder "images" und ähnlich. In den Online-Tutorials von CodeW3C.com speichert unser Ingenieur die meisten häufig verwendeten Bilder in einem Ordner namens "i", der für "images" steht. Der Vorteil dieses Verfahrens ist, dass der Pfad so weit wie möglich vereinfacht wird.

Beispiel

Im folgenden Beispiel fügen wir auf der Seite ein Bild hinzu, das von einem Ingenieur von CodeW3C.com auf dem Frühlingsblumenhafen in Shanghai aufgenommen wurde. Der Dateiname des Bildes ist "eg_tulip.jpg" und er befindet sich im "i"-Ordner auf dem Server. Dies ist der Quellcode:

<img src="/i/eg_tulip.jpg" />

Die Wirkung des obigen Codes:


Probieren Sie es selbst aus

Hinweis:Sie können unsere Online-TestwerkzeugeProbieren Sie es selbst ausWenn Sie den Dateinamen im Beispiel in "eg_chinarose.jpg" ändern, sehen Sie ein Bild von einer Chinarose. So ähnlich:

Quellcode:

<img src="/i/eg_chinarose.jpg" />

Die Wirkung des obigen Codes:

Syntax

<img src="URL">

Attributwert

Wert Beschreibung
URL

Gibt die URL des Bildes an.

Mögliche Werte:

  • Absoluter URL - Verweist auf eine andere Website (z.B. src="http://www.example.com/image.gif")
  • Relativer URL - Verweist auf eine Datei innerhalb der Website (z.B. src="image.gif")

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung

HTML <img> Tag