HTML <img> 标签
更多“自己尝试”的例子见下文。
定义和用法
<img> 标签用于在 HTML 页面中嵌入图像。
图像实际上并非插入到网页中；图像是链接到网页的。<img> 标签为引用的图像创建了一个占位符。
<img> 标签有两个必需的属性
- src - 指定图像的路径
- alt - 如果图像因某种原因无法显示，则为图像指定替代文本
注意： 还要始终指定图像的宽度和高度。如果未指定宽度和高度，则页面在图像加载时可能会闪烁。
提示： 要将图像链接到另一个文档，只需将 <img> 标签嵌套在 <a> 标签内（请参见下面的示例）。
浏览器支持
| 元素 | |||||
|---|---|---|---|---|---|
| <img> | 是 | 是 | 是 | 是 | 是 |
属性
| Attribute | 值 | 描述 |
|---|---|---|
| alt | text | 为图像指定替代文本 |
| 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 | sizes | 为不同的页面布局指定图像尺寸 |
| src | URL | 指定图像的路径 |
| srcset | URL-list | 指定在不同情况下使用的图像文件列表 |
| usemap | #mapname | 将图像指定为客户端图像映射 |
| width | 像素 | 指定图像的宽度 |
全局属性
<img> 标签也支持 HTML 中的全局属性。
事件属性
<img> 标签也支持 HTML 中的事件属性。
更多示例
示例
对齐图像（使用 CSS）
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:bottom">
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:top">
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="float:right">
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="float:left">
自己动手试一试 »
示例
添加图像边框（使用 CSS）
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="border:5px solid black">
自己动手试一试 »
示例
为图像添加左右边距（使用 CSS）
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:middle;margin:0px 50px">
自己动手试一试 »
示例
为图像添加上下边距（使用 CSS）
<img src="smiley.gif" alt="笑脸" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
自己动手试一试 »
示例
如何从另一个文件夹或另一个网站插入图像
<img src="/images/stickman.gif" alt="Stickman" width="24" height="39">
<img src="https://w3schools.org.cn/images/lamp.jpg" alt="Lamp" width="32" height="32">
自己动手试一试 »
示例
如何为图像添加超链接
<a href="https://w3schools.org.cn">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>
自己动手试一试 »
示例
如何创建图像映射，带有可点击的区域。每个区域都是一个超链接
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
自己动手试一试 »
相关页面
HTML 教程：HTML 图像
HTML DOM 参考：Image 对象
CSS 教程：样式化图像
默认 CSS 设置
大多数浏览器将使用以下默认值显示 <img> 元素
