TRAE-AI编程
页面图片显示不出来，绝大多数不是代码写错，而是路径或属性写错了。本文用最小 HTML 示例讲清 img 标签的三种插入方式：相对路径、绝对路径、响应式加载，并给出「图片不显示」的四类排错清单。核心结论是，src 决定图片能不能找到，alt 决定找不到时能不能被理解，width 与 height 决定加载过程会不会抖动，三者分工不同，缺一个都会出问题。下面每段都给出可复制的片段和判定标准。先确认图片文件与 HTML 文件的相对位置，再决定用哪种方式。
一、先看结论：三种插入方式怎么选
下面这张表给出三种方式的适用场景和注意点。选择依据只有一个：图片放在哪里、要不要随屏幕缩放。
| 方式 | 适用场景 | 注意点 |
|---|---|---|
相对路径 src="a/b.png" |
图片与页面同站、同目录结构 | 目录一挪就失效，换部署路径要改 |
绝对路径 src="/images/a.png" |
站内统一图片目录 | 以站点根目录为基准，本地双击打开会失效 |
width/height + 响应式写法 |
要控制占位、避免加载抖动 | 只写宽度不写高度，页面会跳版 |
需要提醒的是，src 找不到文件时浏览器不会报错中断，只会在页面上留一个破图图标，所以问题常常被拖延到上线才发现。想在线对比不同写法，可用 在线代码实例 验证实际结果。
二、环境确认与最小示例
先准备目录结构，再写最小页面。示例基于 HTML5，不需要任何构建工具；用浏览器直接打开本地文件即可预览。HTML 版本差异对 img 标签的基本写法没有影响。
# 目录结构建议，图片与页面同站时最省心
mkdir -p images
# 把准备好的图片放进来，例如 images 目录下放一张 demo.png
下面是一份能直接用的最小页面。其中 src 指向同目录下的图片，alt 给出文字替代，width 与 height 同时给出以避免加载时页面抖动。
<!DOCTYPE html>
<!-- lang 属性声明页面语言，便于浏览器与读屏软件正确处理 -->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML 插入图片示例</title>
</head>
<body>
<!-- 相对路径：图片与 HTML 同目录时直接写文件名 -->
<img src="images/demo.png" alt="示例图片：一张演示用的截图" width="600" height="400">
</body>
</html>
把这三项属性分开看，src 是图片地址，alt 是加载失败时的替代文字，width 与 height 一起写能预留出占位空间。想系统补齐 HTML 基础，可以看 HTML 教程。
三、方式一：相对路径插入
相对路径以当前 HTML 文件所在目录为基准，是同站页面最常用的写法。它的好处是整站目录结构上移一级也不用改，坏处是页面一挪位置就全部失效。
<!-- 相对路径：当前目录下的 images 子目录 -->
<img src="images/demo.png" alt="相对路径示例">
<!-- 上上一级目录：用 ../ 回退 -->
<img src="../assets/demo.png" alt="回退一级目录示例">判定标准是「把 HTML 文件单独拷到别处，图片还能不能显示」。不能显示就属于相对路径依赖，需要在部署时保持目录结构一致。修复方向是把图片一起随页面迁移，或改用绝对路径。
四、方式二：绝对路径与站点根路径
绝对路径以站点根目录为基准，适合全站统一的图片目录。注意这里有两种：/images/demo.png 是站点根路径，https://example.com/images/demo.png 是完整网络地址。
<!-- 站点根路径：以服务器根目录为基准，不看 HTML 文件在哪 -->
<img src="/images/demo.png" alt="站点根路径示例">
<!-- 完整网络地址：适合引用其他站点图片，注意对方可能防盗链 -->
<img src="https://example.com/images/demo.png" alt="外部图片示例">
这两种写法的主要问题在本地预览：站点根路径在本地双击打开 HTML 时找不到 /images，会显示破图。修复方向是本地用相对路径开发，上线后切到根路径，或干脆全程用相对路径。要不要引外部图片，取决于对方是否允许跨域引用。
五、方式三：响应式与占位写法
只写宽高不够，还要考虑不同屏幕的缩放。下面给出保留宽高比、避免加载抖动的写法，以及样式里的响应式方案。
<!-- 写法一：保留高度属性，浏览器按比例预留空间 -->
<img src="images/demo.png" alt="带占位尺寸示例" width="600" height="400">
<!-- 写法二：用 CSS 控制宽度，高度设成 auto 保持比例 -->
<style>
.responsive {
width: 100%; /* 宽度跟随容器 */
height: auto; /* 高度按比例自适应，避免拉伸变形 */
}
</style>
<img class="responsive" src="images/demo.png" alt="响应式图片示例">判定标准是「图片加载前页面会不会突然跳一下」。会跳就说明只写了宽度没写高度。这类问题在移动端尤其明显，属于典型的边界被忽略。
| 现象 | 常见原因 | 修复方向 |
|---|---|---|
| 显示破图，无报错 | src 路径写错或文件名大小写不符 |
按实际目录核对路径，src 属性没有自动纠错 |
| 本地能显示，线上不能 | 用了 /images 站点根路径 |
本地改相对路径，或确认部署目录与根路径一致 |
| 图片变形拉伸 | 只写 width 不写 height |
补上 height="auto" 或同时给出原始宽高比例 |
| 加载时页面跳动 | 未预留占位空间 | 一并给出 width 与 height |
| 外部图片偶尔加载失败 | 对方站点防盗链或已删除 | 下载图片自行托管，不要依赖外部地址 |
以上失败与修复均来自真实边界场景，未在本机执行，按 HTML 规范推断。改完之后用浏览器打开页面检查渲染结果，预期是图片正常显示、加载过程不跳动。如果样式改完没生效，先确认 CSS 选择器真的匹配到了那个 img 元素，再核对文件名大小写与目录位置，多数「样式也没写错却不生效」的问题都出在这一步。顺带说一句，img 属于替换元素，浏览器会等图片真正下载完才知道最终尺寸，所以宽高属性给出的不是装饰，而是提前告知渲染引擎要留多大的位置。想查标签属性全表，可读 HTML 参考手册。
总结
HTML 插入图片，关键是分清三个属性的分工：src 用相对路径还是站点根路径取决于图片归属和部署方式，alt 决定加载失败时页面还能不能表达含义，width 与 height 一起写能避免加载时的版块跳动。选方式时按这张表走：同站同目录用相对路径，统一图片目录用站点根路径，需要自适应就用 CSS 控制宽度并把高度设成自动。写完后必做的一件事是把页面挪到别处试一次，路径依赖类问题只有这一步能发现。
延伸学习
想在编程狮系统学 HTML，可以顺着下面三篇深入：
常见问题
Q：图片显示不出来，代码看着没错怎么办？
A：先核对 src 路径。相对路径以 HTML 文件所在目录为基准，文件名大小写也要完全一致。把路径换成实际目录再试一次，多数「代码没错却不显示」都是路径问题。
Q：本地好好的，传到服务器就破图？
A：多半用了 /images/... 这种站点根路径。本地双击打开 HTML 时没有服务器根目录，图片自然找不到。本地用相对路径，或在部署后确认根路径与目录一致。
Q：alt 属性可以省略吗？
A：不能省。图片加载失败时 alt 是页面仅剩的信息载体，读屏软件也依赖它描述内容。即使图片只是装饰，也应写一个反映用途的简短文字。
Q：图片加载时页面为什么会跳一下？
A：因为图片没有占位空间，加载完成后才撑开高度。给 img 同时写上 width 和 height，或用 CSS 设 width: 100%; height: auto，浏览器就能提前预留位置。
