HTML <img> Tag

定义和用法

<img> 标签用于在 HTML 页面中嵌入图像。

从技术上讲，实际上并没有将图像插入到网页中，而是将图像链接到了网页。<img> 标签创建了一个容器，用于引用图像。

<img> 标签有两个必需的属性：

  • src - 定义图像的路径
  • alt - 如果由于某种原因无法显示图像，则指定图像的替代文本

注意：另外，始终要指定图像的宽度和高度。如果未指定宽度和高度，则在加载图像时页面可能会闪烁。

提示：如需将图像链接到另一个文档，只需将 <img> 标记嵌套在 <a> 标签内（请参阅下面的示例）。

另请参阅：

HTML 教程：HTML Images

HTML DOM 参考手册：Image 对象

CSS 教程：设置图像的样式

延伸阅读：如何正确地使用图像

实例

示例 1

在下面的示例中，我们在页面中插入了一幅 CodeW3C.com 的工程师在上海鲜花港拍摄的郁金香照片：

<img src="tulip.jpg" alt="上海鲜花港 - 郁金香" />

Try It Yourself

Shanghai Flower Port - Tulip

示例 2

另一个如何插入图像的示例：

<img src="dancer.png" alt="舞者" width="500" height="749">

Try It Yourself

提示：页面底部提供更多示例。

属性

属性 值 描述
alt 文本 定义图像的替代文本。
crossorigin
  • anonymous
  • use-credentials
 允许使用来自允许跨域访问的第三方网站的图像与画布（canvas）一起使用。
height Pixel 定义图像的高度。
ismap ismap 将图像定义为服务器端图像映射。
loading
  • eager
  • lazy
 指定浏览器是否应立即加载图像，或者推迟加载图像直到满足某些条件。
longdesc URL 定义指向图像详细描述的 URL。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 定义在获取图像时要使用的引用信息。
sizes 尺寸 定义不同页面布局的图像尺寸。
src URL 定义图像的路径。
srcset URL-Liste Bestimmt die Liste der Bilddateien, die in verschiedenen Fällen verwendet werden.
usemap #mapname Definiert das Bild als Client-seitige Bildkarten.
width Pixel Bestimmt die Breite des Bildes.

Globale Attribute

<img> Die Tags unterstützen auch Globale Attribute in HTML.

Event-Attribute

<img> Die Tags unterstützen auch Event-Attribute in HTML.

Mehr Beispiele

Beispiel 3

Bilden ausrichten (verwenden Sie CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Try It Yourself

Beispiel 4

Fügen Sie dem Bild einen Rahmen hinzu (verwenden Sie CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Try It Yourself

Beispiel 5

Fügen Sie dem Bild linke und rechte Außenabstände hinzu (verwenden Sie CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Try It Yourself

Beispiel 6

Fügen Sie dem Bild obere und untere Außenabstände hinzu (verwenden Sie CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Try It Yourself

Beispiel 7

Wie ein Bild aus einem anderen Ordner oder einer anderen Website einfügen:

<img src="/photo/flower.gif" alt="Blume" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Baum" width="150" height="161">

Try It Yourself

Beispiel 8

Wie man Hyperlinks zu Bildern hinzufügt:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Try It Yourself

Beispiel 9

Wie man ein Bild mit klickbaren Bereichen erstellt. Jeder Bereich ist ein Hyperlink:

<img src="life.png" alt="Leben" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Kaffee" href="coffee.html">
</map>

Try It Yourself

Weiterführende Lektüre - Wie man Bilder korrekt verwendet

Eine der auffälligsten Eigenschaften von HTML und XHTML ist die Möglichkeit, Bilder im Text des Dokuments zu integrieren, sei es als inneres Objekt des Dokuments (Inlinesymbol) oder als separates Dokument, das über einen Hyperlink heruntergeladen werden kann, oder als Hintergrund des Dokuments.

Die angemessene Einbindung von Bildern (statische oder animierte Symbole, Fotos, Erklärungen, Zeichnungen usw.) im Dokumentcontent macht es lebendiger und ansprechender und sieht professioneller aus. Man kann auch ein Bild speziell als visuelle Leitfigur für einen Hyperlink verwenden.

Wenn jedoch Bilder übermäßig verwendet werden, wird das Dokument zersplittert, unübersichtlich und schwer lesbar, und es wird mehr Zeit für das Herunterladen und Anzeigen der Seite benötigt.

Lesen Sie den folgenden Artikel, um die beiden wichtigsten Bildformate im Web zu lernen: GIF und JPEG, sowie wie man Bilder korrekt verwendet:

Standardmäßige CSS-Einstellungen

Die meisten Browser zeigen die folgenden Standardwerte an. <img> Element:

img {
  display: inline-block;
{}

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support