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
支持 支持 支持 支持 支持