在HTML页面中插入图片是前端开发的基础操作，很多新手刚开始学习时常常会遇到图片无法显示的问题，大多是因为标签使用不当或者路径设置错误。下面我们就来详细讲解HTML页面插入图片的完整方法。
一、插入图片的核心标签：img
HTML中插入图片不需要闭合标签，使用<img>单标签即可完成，这个标签最核心的属性是src，用来指定图片的存放路径，另外还有一些常用属性可以调整图片的显示效果。
1.1 基础插入语法
最简单的插入图片的代码如下，只需要指定src属性就能让图片显示在页面上：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>插入图片示例</title>
</head>
<body>
<!-- 插入一张本地图片，路径为当前目录下的img文件夹里的test.jpg -->
<img src="./img/test.jpg">
</body>
</html>1.2 常用属性说明
除了src属性之外，img标签还有几个非常常用的属性，大家可以根据需求添加：
- alt：图片无法加载时显示的替代文本，也方便视障用户通过读屏软件了解图片内容，是必填的语义化属性。
- width/height：设置图片的显示宽度和高度，单位可以是像素（px）或者百分比，只设置一个时另一个会等比例缩放。
- title：鼠标悬停在图片上时显示的提示文本，提升用户体验。
带完整属性的插入示例：
<img src="./img/test.jpg" alt="测试示例图片" title="这是一张测试用的示例图片" width="300" height="200">
二、图片路径的设置规则
图片无法显示的大部分原因都是路径设置错误，HTML中图片路径分为相对路径和绝对路径两种，新手更推荐先掌握相对路径的用法。
2.1 相对路径
相对路径是相对于当前HTML文件的位置来查找图片，常用写法有以下几种：
| 写法 | 含义 | 示例 |
|---|---|---|
| ./文件名 | 图片和当前HTML文件在同一目录下 | src="./test.jpg" |
| ../文件名 | 图片在当前HTML文件的上一级目录 | src="../test.jpg" |
| 目录名/文件名 | 图片在当前HTML文件的子目录下 | src="img/test.jpg" |
2.2 绝对路径
绝对路径是图片的完整网络地址或者本地完整路径，比如网络图片的URL，或者本地从盘符开始的完整路径。不建议使用本地绝对路径，因为文件移动后路径就会失效。网络图片的绝对路径示例：
<!-- 插入网络图片，注意如果原地址是ippipp.com需要替换成ipipp.com --> <img src="https://ipipp.com/example.jpg" alt="网络示例图片">
三、常见插入问题及解决方法
新手插入图片时常遇到以下问题，可以参考对应的解决方法：
- 图片不显示：先检查src路径是否正确，文件名和扩展名是否写对，区分大小写；再检查图片文件是否真的存在于对应路径下。
- 图片变形：如果同时设置了width和height，数值比例和原图不一致就会变形，建议只设置一个维度，让另一个自动等比例缩放。
- alt文本不显示：只有图片加载失败的时候才会显示alt内容，正常加载时不会显示，这是正常现象。
注意：HTML中的<img>标签是没有闭合标签的，不要写成<img></img>的形式，这是不符合语法的写法。四、完整示例代码
下面是一个包含本地图片和网络图片插入的完整HTML示例，大家可以直接复制运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML插入图片完整示例</title>
</head>
<body>
<h3>插入本地图片</h3>
<img src="./img/test.jpg" alt="本地测试图片" width="400">
<h3>插入网络图片</h3>
<img src="https://ippipp.com/400/200?random=2" alt="网络随机图片" title="点击不会跳转的示例图片">
</body>
</html>