在HTML页面中插入图片，是搭建网页内容时非常常见的基础需求。无论是制作个人博客、企业官网还是功能复杂的Web应用，使用图片都能让页面信息的传达更加直观、富有感染力。实现图片插入的核心标签是<img>，它是一个自闭合标签，不需要像<div>或<p>那样书写成对的开始与结束标记。开发者只需要通过src属性指明图片的存放位置，通过alt属性设定图片无法显示时的替代说明文字，即可完成一次基本的图片引入操作。理解<img>标签的工作机制以及围绕它展开的路径规则、属性配置，是每个前端学习者在初学阶段都必须掌握的知识点。
理解img标签与图片插入的基本机制
在HTML的众多标签中，<img>标签属于一种特殊的存在。它不包裹任何子元素，也没有文本内容，页面浏览器在解析到该标签时，会根据标签中src属性提供的地址去请求对应的图片资源，并将获取到的图像绘制在页面相应位置。这种工作机制意味着，<img>标签本身只是一个“占位声明”，真正起作用的是它的属性配置。
谈到<img>标签的属性，src是其中唯一必须存在的属性。如果忘记书写src，浏览器将不知道要去哪里加载图片，整个标签也就失去了意义。而alt属性虽然属于可选范畴，但在实际项目中强烈建议为每一张图片都添加。当图片地址失效、网络请求被阻断，或者用户正在使用屏幕阅读器等辅助工具浏览页面时，alt属性中的文字就会被调用，帮助访问者理解这个位置原本应该展现的内容。良好的图片插入实践，应该是将src与alt视为一组配套的配置项，两者相结合，既保证图片的正常显示，也兼顾了页面的可访问性与友好度。
从语法形式上看，基础的插入写法十分简洁：在一个<img>标签内，分别用等号连接属性名与属性值，多个属性之间以空格隔开。下面这个示例展示了最精简的图片插入写法：
<img src="图片路径" alt="图片替代文本">
这段代码就是图片插入的基本骨架。其中src属性的值可以是相对路径也可以是绝对地址，alt属性的值则是一段纯文本描述。虽然仅仅两行属性就能完成图片引入，但在真实开发中，路径选择与属性搭配的细节，会直接影响页面加载的稳定性和用户体验，这也是后续需要深入探讨的内容。
图片路径的类型与适用场景
决定图片能否被页面成功加载的关键因素，是src属性中路径的书写方式。根据图片资源存放位置与当前HTML文件之间关系，路径可以分为绝对路径、相对路径以及根相对路径三种类型。每一种路径都有自己的应用场景，也有各自的优缺点，开发者需要结合项目的实际部署方式做出合理选择。
1. 绝对路径
绝对路径指的是图片在网络中完整的资源定位地址，也就是一个以协议头开头的完整URL。这种路径通常用于引入外部网站或CDN（内容分发网络）上托管的图片资源。使用绝对路径的优点是资源来源固定，不依赖于当前站点的文件目录结构；缺点是如果外部资源所在的服务出现波动，图片就会加载失败，同时也会增加跨站请求的延迟。下面的示例展示了如何使用绝对路径引入一张网络上的图片：
<!-- 引入外部网络图片 --> <img src="https://ipipp.com/assets/images/banner.jpg" alt="站点横幅图片">
在编写绝对路径时，务必确认协议头、域名、目录层级以及文件名拼写的准确性，任何一处字符缺失都会导致请求返回错误状态码，最终使图片无法显示。
2. 相对路径
相对路径是开发本地项目或静态站点时使用频率最高的一种路径形式，它基于当前HTML文件所在的目录位置，通过目录层级关系来定位图片资源。相对路径的好处是移动整个项目文件夹时，只要图片与HTML文件之间的相对位置保持不变，路径就无需修改，这让项目具备了很高的可移植性。
在实际书写中，相对路径存在几种常见的形式。当图片与HTML文件处在同一个目录下时，直接在src中书写图片文件名即可；当图片存放在HTML文件下一级的子目录中时，需要按照目录名与文件名的顺序拼接路径；当图片存放在HTML文件的上级目录时，则要通过两个连续的英文句点加上斜杠组成表示“上一级目录”的符号，逐层向上跳转。以下列表总结了这三种写法特征：
- 同级引用：图片和HTML文件在同一目录，直接写文件名，如
<img src="photo.jpg" alt="示例图片"> - 下级目录引用：图片位于HTML文件的下一级文件夹中，写为
<img src="images/photo.jpg" alt="示例图片"> - 上级目录引用：图片存放在HTML文件上一级目录，写为
<img src="../photo.jpg" alt="示例图片">
这种贴近文件系统思维的路径方式，让开发者可以非常直观地判断资源位置。不过，相对的层级越深，路径的可读性就越差，这也是根相对路径能够带来补充价值的地方。
3. 根相对路径
根相对路径是一种以斜杠开头的路径写法，它不关心当前页面在站点中的目录位置，而是直接以网站的根目录作为起点来解析图片地址。例如，/images/photo.jpg表示从站点根目录进入images文件夹后找到名为photo.jpg的图片。这种写法在多页面共享统一资源目录的项目中非常实用，因为无论页面位于哪一个层级，根相对路径始终指向同一个资源位置，有效避免了多层级的相对路径容易出错的问题。
当然，根相对路径的适用范围也受到限制，它要求站点必须部署在域名根目录下，如果项目被部署到某个子目录中，以这种方式书写的路径就会无法匹配到正确资源。以下示例展示了根相对路径的写法：
<!-- 根目录下的images文件夹中的图片 --> <img src="/images/photo.jpg" alt="根路径示例图片">
综合来看，外部资源用绝对路径，内部同层或跨层资源优先考虑相对路径，站内统一路径管理则适合根相对路径。理解三者之间的差异与边界，是保证图片稳定显示的先决条件。
常用属性与显示效果的调整
图片成功插入页面之后，开发者常常还需要控制图片的尺寸、提示信息等显示细节。除了src与alt这两个核心属性，<img>标签还提供了一系列可选属性，用于对图片的最终呈现效果进行精细调节。
width与height用于定义图片在页面中占据的宽度和高度，两者的值可以是具体的像素数值，也可以是相对于容器宽度的百分比。需要关注的是，如果只设置其中一个属性，图片会按照原始宽高比自动缩放另一维度，从而避免图片发生形变。而title属性则提供了悬停提示功能，当鼠标指针移动到图片上停留片刻时，该属性的值就会以气泡提示的形式浮现出来。真实开发中，title常用于补充说明图片的出处或点击行为等额外信息。下表整理了这几个常用属性的作用与示例写法：
| 属性名 | 作用说明 | 示例 |
|---|---|---|
| width | 设置图片的显示宽度，单位可以是px或者百分比 | width="200" 或者 width="50%" |
| height | 设置图片的显示高度，单位可以是px或者百分比 | height="150" |
| title | 鼠标悬停在图片上时，浏览器显示的提示文本 | title="这是一张示例图片" |
将这些属性组合使用时，需要注意宽度与高度的协调，建议以宽度为主控尺寸，高度则保持自动，这样既能控制版面布局，又可保留图片原始比例。下面的代码演示了对一张图片同时设置尺寸与提示信息的完整写法：
<img src="photo.jpg" alt="示例图片" width="300" height="200" title="点击查看大图">
当一个页面中图片数量较多时，合理配置这些属性还能在一定程度上提升页面的整体布局稳定性。因为浏览器在加载时已经知晓图片占用的空间，就不会在图片陆续加载的过程中不断调整页面元素的排布位置，有效避免了页面内容的跳动现象。
完整的插入示例与问题排查思路
将前面介绍的知识点整合起来，可以构造出一个完整且规范的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>
在实际开发过程中，插入图片之后偶尔会遇到图片位置出现破碎图标或空白区域的情况，这通常属于资源加载失败的问题。排查这类问题最有效的思路是从路径和资源本身两个方面入手。首先仔细核对src属性中的路径拼写，确认文件名、目录层级、大小写是否与真实情况完全一致；其次要检查图片存放在项目中的实际位置，确认路径写法与相对位置之间的匹配关系；此外还要考虑浏览器对图片格式的兼容能力，常见的jpg、png、gif、webp格式均能得到良好支持，而部分冷门格式则存在渲染失败的可能。
如果图片路径无误、格式也没问题却依旧显示异常，还可以借助浏览器开发者工具中的网络标签页，观察图片资源的请求状态，排查是否存在服务器配置限制、防盗链规则或跨域策略导致的请求被拦截。这类底层问题往往与业务代码无关，却会在调试过程中反复出现，具备这种层层递进的排查意识，能够帮助开发者更快地定位并解决问题。
总而言之，将图片移入HTML页面并不是一个简单的“贴标签”动作，它涉及路径选择、属性配置、资源部署等多个维度的综合考量。从基础语法到路径机制，从属性调节到异常排查，每一个环节都值得认真对待。掌握这些细节，不仅能保证图片在页面中准确、美观地呈现，也为后续学习响应式图片、懒加载等进阶技术打下了扎实的基础。