在HTML页面中插入图片是前端开发中最常见也最基础的内容之一。看似只需要一个标签，但真正要让图片稳定显示、语义清晰并兼顾可访问性，需要同时理解标签语法、属性含义、资源路径以及浏览器加载规则。很多图片无法显示、布局抖动或替代文本缺失的问题，往往都源于对这些基础概念掌握不够完整。
一、img 标签的基本结构与关键属性
HTML 中插入图片主要依靠<img>标签。它属于替换元素，也就是浏览器会把标签对应位置替换成实际的图像内容。这个标签不需要闭合标签，通常直接写成单标签形式。真正决定图片能否显示的是src属性，它告诉浏览器去哪里获取图像资源。只要src指向的地址能够被浏览器访问，并且返回的是浏览器可识别的图像资源，图片就可以正常渲染。
在所有属性中，alt的重要性经常被低估。它并不是为了“应付检查”而存在的装饰性字段，而是图片内容的文本替代。当网络异常、路径错误、图片被屏蔽或用户使用读屏软件时，alt会承担描述图片的作用。对于普通用户来说，图片加载失败时可以看到替代文本；对于无障碍访问来说，它是视障用户理解页面内容的重要依据。因此，除了纯装饰图片可以使用空字符串之外，大多数内容图片都应该填写准确、简洁的描述。
除了src和alt，width和height也经常被用到。它们用于声明图片在页面中的显示尺寸。提前设置尺寸可以让浏览器在图片下载完成之前预留空间，减少页面加载过程中的布局跳动。title属性则用于鼠标悬停时的额外提示，它可以补充说明，但不能替代alt。下面的示例展示了最基础的插入方式，以及带常用属性的写法。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML插入图片基础示例</title>
</head>
<body>
<!-- 图片位于当前HTML文件同级的images目录中 -->
<img src="./images/demo.jpg" alt="示例图片">
</body>
</html><img src="./images/demo.jpg" alt="产品示意图" title="产品示意图" width="320" height="200">
注意：<img>不需要写成<img></img>，后者不符合 HTML 语法。
二、图片路径的写法与资源定位
图片无法显示时，最常见的原因是路径错误。相对路径是新手最应该先掌握的方式，因为它更符合网站项目文件组织的习惯。相对路径以当前 HTML 文件所在位置为基准，通过文件名、目录名和特殊符号来定位图片。例如，./表示当前目录，../表示上一级目录，而直接写目录名则通常表示进入当前目录下的子目录。
在实际项目中，建议把图片统一放在一个固定目录中，例如images、img或assets/images。这样不仅方便维护，也能减少路径混乱。当页面层级较深时，要特别注意每一层目录对应的返回关系。如果 HTML 文件位于子目录，而图片位于上一级目录，就需要使用../返回上一级。如果连续多级返回，也可以写成类似../../images/demo.jpg的形式。
绝对路径则提供图片的完整访问地址，常见于引用网络图片。它包含协议、域名和具体资源路径，例如使用https://ipipp.com/images/demo.jpg引用远程图片。对于本地文件，虽然也可以写盘符完整路径，但这种方式不适合发布到网站，因为文件移动、系统差异或部署环境变化都会导致路径失效。下面的表格整理了几种常见的相对路径写法。
| 写法 | 含义 | 示例 |
|---|---|---|
| ./文件名 | 图片和当前 HTML 文件在同一目录下 | src="./demo.jpg" |
| ../文件名 | 图片在当前 HTML 文件的上一级目录 | src="../demo.jpg" |
| 目录名/文件名 | 图片在当前 HTML 文件的子目录下 | src="images/demo.jpg" |
下面这组示例把同级目录、上一级目录、子目录和网络图片放在一起，便于对照理解。
<!-- 同级目录 --> <img src="./demo.jpg" alt="同级目录图片"> <!-- 上一级目录 --> <img src="../demo.jpg" alt="上一级目录图片"> <!-- 子目录 --> <img src="images/demo.jpg" alt="子目录图片"> <!-- 网络图片 --> <img src="https://ipipp.com/images/demo.jpg" alt="网络图片">
三、常见问题排查与完整实践
当图片没有显示时，可以按照固定顺序排查。首先检查src是否拼写正确，包括文件名、扩展名和目录名。很多服务器区分大小写，例如Demo.jpg和demo.jpg可能不是同一个文件。其次确认图片文件确实存在于指定位置，而不是只存在于设计稿或本地缓存中。如果使用的是网络图片，还要确认地址可以公开访问，并且没有被防盗链、权限控制或网络限制阻止。
图片变形也是常见问题。出现这种情况通常是因为同时设置了width和height，但设置的比例与原图不一致。更稳妥的做法是只设置一个维度，让浏览器根据原图比例自动计算另一个维度。如果希望图片在不同屏幕下都能良好显示，还可以结合 CSS 控制最大宽度，使图片不超出容器。无论采用哪种方式，核心目标都是保持图片比例，避免拉伸失真。
在更完整的页面实践中，除了正确插入图片，还应关注图片与周围内容的关系。如果图片本身是一幅插图、图表或作品，可以配合<figure>和<figcaption>使用，让图片和说明文字形成更清晰的语义结构。下面的完整示例包含本地图片、网络图片和带说明的图片，可以作为练习模板。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML插入图片完整示例</title>
</head>
<body>
<h2>本地图片</h2>
<!-- 只设置宽度，高度由浏览器按比例计算 -->
<img src="./images/local.jpg" alt="本地图片示例" width="400">
<h2>网络图片</h2>
<img src="https://ipipp.com/400/200?random=1" alt="网络占位图片" title="网络图片示例">
<h2>带说明的图片</h2>
<figure>
<img src="./images/chart.png" alt="季度数据示意图" width="480">
<figcaption>图片说明可以使用figcaption描述</figcaption>
</figure>
</body>
</html>总体来看，HTML 插入图片的关键并不只是写一个标签，而是理解标签背后的资源定位、语义表达和显示控制。src决定图片从哪里来，alt决定图片无法显示或被辅助技术读取时如何表达，路径决定资源能否被找到，尺寸设置则影响页面布局与视觉稳定性。掌握这些基础点之后，再遇到图片不显示、变形或语义不清的问题，就能更快定位原因并给出合适的解决方案。