图片不显示主因是src路径错误，基准点为HTML文件所在目录；以/开头为网站根目录绝对路径，无/或./开头为相对路径，../向上退一级；本地双击仅支持相对路径，服务器环境可兼用两种；需检查Network面板状态码、文件名大小写及扩展名一致性。
图片 src 路径写对了吗？先分清相对路径的基准点
HTML 中图片不显示，八成是 src 路径错了。关键不是“怎么写”，而是“从哪算起”——浏览器解析 src 时，基准是当前 HTML 文件所在目录，不是编辑器打开的位置，也不是服务器根目录。
常见错误示例：
- HTML 在 /pages/index.html，想引用 /images/logo.png，却写了 src="images/logo.png"（漏了开头斜杠，变成相对路径）；
- 实际图片在 ./assets/img/icon.jpg，却写成 src="/assets/img/icon.jpg"（加了斜杠，浏览器会从域名根目录找）。
- 以
/开头 → 绝对路径，从网站根目录开始找（如http://localhost:8080/后面的部分） - 以
./或无前缀开头 → 相对路径，从当前 HTML 文件所在目录出发 - 以
../开头 → 往上退一级目录再找
用浏览器开发者工具直接看请求地址和状态码
右键图片位置 → “检查”，在 Elements 面板找到 <img> 标签，点开它的 src 属性值，鼠标悬停或右键复制链接，在新标签页打开。这是最直接的验证方式。
如果打开后提示 404 Not Found，说明路径确实不对；如果显示 403 Forbidden，可能是服务器禁止了该目录访问；如果是空白但控制台报 net::ERR_FILE_NOT_FOUND，说明你双击 HTML 文件用 file:// 协议打开，而路径用了绝对路径（/images/xxx），此时浏览器会去系统根目录找，必然失败。
- 本地双击打开 HTML：只能用相对路径（
./images/a.png或images/a.png），禁用以/开头的路径 - 通过本地服务器（如
python3 -m http.server）访问：可用相对路径，也可用以/开头的路径（前提是文件真在服务根目录下） - 检查 Network 面板中图片请求的
Status和Preview标签页，能立刻确认是否加载成功、返回的是不是图片二进制数据
<img> 标签本身有没有被样式或结构意外隐藏？
路径对、请求成功、返回 200，但图片还是看不见？别急着改路径，先查 DOM 渲染层面的问题。
立即学习“前端免费学习笔记（深入）”；
- 检查元素是否被
display: none、visibility: hidden或opacity: 0影响 - 父容器设置了
overflow: hidden且图片尺寸超出，可能被裁掉 - 图片没有设置宽高，而原始尺寸为 0×0（比如空的
src或加载失败后 fallback 行为），导致占位消失 - CSS 中写了
img { max-width: 100%; height: auto; }，但父容器宽度为 0，也会让图片不可见
临时加一句 style="border: 1px solid red;" 到 <img> 上，能快速判断是“没渲染”还是“渲染了但看不见”。
图片文件名大小写、扩展名、编码要不要较真？
要。Windows 文件系统不区分大小写，但大多数 Web 服务器（Linux/Nginx/Apache）和 Git 默认是区分的。你本地看着好好的 LOGO.PNG，上传到服务器后写成 src="logo.png" 就会 404。
- 统一用小写字母 + 连字符命名：推荐
hero-banner.jpg，避免MyPhoto.JPG - 确认扩展名真实匹配：用文件属性或命令行
file image.jpg（Linux/macOS）或 PowerShellGet-Item .\a.png | ForEach-Object {$_.Length}验证是否真为图片文件 - 中文路径在 URL 中必须编码，但强烈建议避免——
src="产品图.jpg"会被转义成乱码，改成拼音chanpin-tu.jpg更稳妥
路径问题从来不是“差不多就行”的事，差一个点、一个斜杠、一个大小写，就是 404 和正常显示的区别。调试时优先信浏览器 Network 面板，而不是编辑器里的文件树。
