在HTML页面中插入图片是前端开发的基础操作，核心是通过img标签实现图片的引入，同时需要正确配置图片的路径才能让图片正常显示在页面上。img标签是自闭合标签，不需要单独的结束标签，通过src属性指定图片的位置，alt属性设置图片无法显示时的替代文本。
基础插入语法
插入图片的最基础语法如下，只需要指定src属性和alt属性即可完成最简单的图片插入：
<img src="图片路径" alt="图片替代文本">
其中src是必须的属性，用于指定图片的存放位置，alt属性用于当图片加载失败或者用户使用屏幕阅读器时提供文本说明，建议每次插入图片都添加该属性。
图片路径的类型
根据图片存放的位置不同，src属性的路径可以分为三种类型，开发者需要根据实际场景选择合适的路径类型。
1. 绝对路径
绝对路径是指图片在网络上的完整URL地址，通常用于引入外部网络的图片，示例代码如下：
<!-- 引入外部网络图片 --> <img src="https://ipipp.com/example/images/demo.jpg" alt="示例外部图片">
2. 相对路径
相对路径是相对于当前HTML文件的位置来指定图片路径，适合引入本地项目中的图片，常见的相对路径写法如下：
- 图片和HTML文件在同一目录：直接写图片文件名，如<img src="test.jpg" alt="测试图片">
- 图片在HTML文件的下一级目录：写目录名+文件名，如<img src="images/test.jpg" alt="测试图片">
- 图片在HTML文件的上一级目录：用../表示上级目录，如<img src="../test.jpg" alt="测试图片">
3. 根相对路径
根相对路径以/开头，表示从网站的根目录开始查找图片，适合多页面项目的统一路径管理，示例代码如下：
<!-- 根目录下的images文件夹中的图片 --> <img src="/images/test.jpg" alt="根路径示例图片">
可选属性配置
除了src和alt两个核心属性外，img标签还支持多个可选属性来调整图片的显示效果：
| 属性名 | 作用说明 | 示例 |
|---|---|---|
| width | 设置图片的宽度，单位可以是px或者百分比 | width="200" 或者 width="50%" |
| height | 设置图片的高度，单位可以是px或者百分比 | height="150" |
| title | 鼠标悬停在图片上时显示的提示文本 | title="这是一张示例图片" |
示例代码如下：
<img src="test.jpg" alt="示例图片" width="300" height="200" title="点击查看大图">
常见问题及解决方法
插入图片时最常见的问题是图片无法正常显示，通常可以从以下几个方面排查：
- 检查src路径是否正确，确认图片文件名和路径拼写没有错误
- 确认图片文件和HTML文件的相对位置是否符合路径写法
- 检查图片格式是否支持，HTML支持的常见图片格式有jpg、png、gif、webp等
- 如果是本地图片，确认图片文件确实存在于指定的路径下
完整示例代码
以下是一个完整的HTML页面插入本地图片的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片插入示例</title>
</head>
<body>
<h1>本地图片展示</h1>
<!-- 插入同一目录下的图片 -->
<img src="local_img.jpg" alt="本地图片" width="400">
<h1>网络图片展示</h1>
<!-- 插入网络图片 -->
<img src="https://ipipp.com/example/remote_img.png" alt="网络图片">
</body>
</html>