HTML <img> 标签

定义和用法

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

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

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

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

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

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

另请参阅：

HTML 教程：HTML 图像

HTML DOM 参考手册：Image 对象

CSS 教程：设置图像的样式

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

实例

例子 1

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

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

亲自试一试

上海鲜花港 - 郁金香

例子 2

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

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

亲自试一试

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

属性

属性 值 描述
alt 文本 规定图像的替代文本。
crossorigin
  • anonymous
  • use-credentials
 允许使用来自允许跨域访问的第三方网站的图像与画布（canvas）一起使用。
height 像素 规定图像的高度。
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-list 规定在不同情况下使用的图像文件列表。
usemap #mapname 将图像定义为客户器端图像映射。
width 像素 规定图像的宽度。

全局属性

<img> 标签还支持 HTML 中的全局属性。

事件属性

<img> 标签还支持 HTML 中的事件属性。

更多实例

例子 3

对齐图像（使用 CSS）：

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

亲自试一试

例子 4

添加图像边框（使用 CSS）：

<img src="flower.gif" alt="Flower" style="border:5px solid black">

亲自试一试

例子 5

为图像添加左右外边距（使用 CSS）：

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

亲自试一试

例子 6

为图像添加上下外边距（使用 CSS）：

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

亲自试一试

例子 7

如何从另一个文件夹或另一个网站插入图像：

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.w3school.com.cn/photo/tree.png" alt="Tree" width="150" height="161">

亲自试一试

例子 8

如何给图片添加超链接：

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

亲自试一试

例子 9

如何创建带有可点击区域的图像映射。每个区域都是一个超链接：

<img src="life.png" alt="Life" 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="Coffee" href="coffee.html">
</map>

亲自试一试

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

HTML 和 XHTML 最引人注目的特征之一，就是能够在文档的文本中包括图像，既可以把图像作为文档的内在对象（内联图像），也可以将其作为一个可通过超链接下载的单独文档，或者作为文档的背景。

合理地在文档内容中加入图像（静态的或者具有动画效果的图标、照片、说明、绘画，等等）时，会使文档变得更加生动活泼，更加引人入胜，而且看上去更加专业，更具信息性并易于浏览。还可以专门使一个图像成为超链接的可视引导图。

然而，如果过度使用图像，文档就会变得支离破碎，混乱不堪，而且无法阅读，用户在下载和查看该页面时，更会增加很多不必要的等待时间。

请阅读下面的文章，学习 Web 上的两种主要图像格式：GIF 和 JPEG，以及如何正确地使用图像：

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <img> 元素：

img {
  display: inline-block;
}

亲自试一试

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持