系列专栏：HTML 零基础入门到企业实战全套教程【连载系列】 定位：零基础友好、无门槛入门，从基础语法到企业规范、实战开发、兼容适配全覆盖，适合前端初学者、转行开发者、在校学生，全程配套代码案例，可直接上手实操 上一节：5.1 img 图片标签基础、alt、width、height 属性 本节：图片路径精讲，解决 90% 新手图片不显示的问题
前言
很多同学学会了<img>标签之后，第一件事就是遇到噩梦：图片红叉、死活不显示。 绝大多数情况不是标签写错了，而是 src 路径写错。
HTML 的 src 一共分三类路径：本地绝对路径、相对路径、网络路径。企业开发里有明确的选型规范，哪些能用、哪些禁止上线，这一节一次性讲透，附带目录结构图、可直接复制代码、高频坑点排查清单MDN Web Do...。
先回顾 img 基础语法：
<img src="图片地址" alt="图片描述">
src 是 source，资源地址，核心就是路径。
一、本地绝对路径（本地盘符路径，企业开发禁止上线）
绝对路径：图片在你电脑硬盘上的完整物理地址，从盘符开始写。
Windows 格式示例：
<!-- ❌ Windows本地绝对路径，仅本地打开能看，上传服务器直接失效 -->
<img src="D:/front/img/logo.png" alt="logo">
Mac / Linux 格式：
<img src="/Users/xxx/desktop/img/logo.png" alt="logo">
特点
✅ 本地双击打开 html 文件可以正常显示 ❌ 致命缺点：换电脑、上传到服务器、发给别人，直接红叉。别人电脑没有 D 盘这个文件夹，路径直接失效。 ❌ Windows 路径分隔符 \ 在 HTML 里容易转义出错，尽量用 /
✅ 结论：仅本地测试临时玩一下，正式项目严禁使用本地绝对路径！
二、相对路径【企业开发首选，重点掌握】
相对路径：以当前这个 HTML 文件所在位置为参照物，去找图片，是企业项目静态资源的标准写法。 符号规则：
./代表当前目录（可以省略）../代表上一级目录，每写一层就往上跳一级- 文件夹名 / 代表进入下一级目录MDN Web Do...
先看标准项目目录结构（前端通用规范）
demo-project/
├─ index.html # html页面
├─ images/
│ └─ banner.jpg # 图片，和index.html同级文件夹内
└─ pages/
└─ about.html # 子页面
场景 1：图片 和 HTML 文件【同级】
目录：
index.html
logo.png
写法：
<!-- 两种等价写法，./可以省略 -->
<img src="./logo.png" alt="logo">
<img src="logo.png" alt="logo">
场景 2：图片在 HTML 的【下一级文件夹】（最常用）
就是上面标准结构，图片放在 images 文件夹：
<img src="images/banner.jpg" alt="横幅">
场景 3：HTML 在子文件夹，图片在上一级目录
目录：
demo-project/
├─ images/
│ └─ banner.jpg
└─ pages/
└─ about.html
about.html 里面引用 banner.jpg，需要先 ../ 跳出 pages 文件夹：
<img src="../images/banner.jpg" alt="横幅">
多层上级：../../ 往上跳两层，以此叠加 ../../assets/xxx.png
💡 记忆口诀：去哪就写啥，往上跳用../，往下进文件夹名 /
三、网络路径（在线 URL，CDN 图片地址）
网络路径就是完整的 http /https 在线图片地址，网上能访问的图片链接。
<!-- ✅ 网络路径，只要图片服务器不删图，在哪打开都能显示 -->
<img src="https://img-blog.csdnimg.cn/xxx.png" alt="示例图">
适用场景
- 临时引用第三方图片、示例图
- 项目 CDN 资源、OSS 图片资源（企业线上静态资源常用）
缺点与坑
- 盗图风险：直接引用别人网站图片，对方设置防盗链就红叉；对方删除图片，你的页面失效
- 外网依赖：断网图片无法加载
企业规范：项目自有图片，不要直接写外网第三方链接；自有资源走 CDN 网络地址是允许的。
四、根相对路径 /（补充：服务器环境专用）
写法以 / 开头：/images/banner.jpg 含义：从网站服务器根目录开始查找，不是电脑盘符！ ⚠️ 重点坑： 直接双击本地 html 文件打开，/ 会识别成本机盘符根目录，大概率失效；必须部署在 web 服务器（vscode live server、nginx）下才能正常解析。
<!-- 服务器环境生效，本地双击打开大概率红叉 -->
<img src="/images/banner.jpg" alt="banner">
适合大型项目、路由多、页面层级很深的后台项目。新手前期优先学好普通相对路径。
五、新手高频踩坑清单（90% 图片不显示都在这里）
- 大小写问题（Linux 服务器严格区分大小写！）
Logo.PNG和logo.png是两张不同文件，Windows 不敏感，线上 Linux 服务器直接找不到。✅ 规范：全部小写命名，图片名不用中文、空格 - 文件名带中文、空格、特殊符号 ❌
首页 横幅.jpg✅home-banner.jpg，推荐短横线分隔，不要空格 - *斜杠写反，写成反斜杠 * ❌
images\banner.jpgWindows 资源管理器习惯，HTML 推荐统一正斜杠/ - 层级数错，../ 多写、少写 建议画目录树，一层一层核对；VSCode 推荐安装路径提示插件，自动补全
- 图片后缀看错：.jpg/.jpeg/.png/.webp 不要写错
- live Server 和直接双击打开效果不一样 根路径
/这种，双击文件 file 协议打开会出错，启动服务访问才正常，不要误以为代码写错
六、企业开发路径选型规范（面试常问）
表格
| 路径类型 | 本地双击 | 服务器部署 | 企业推荐度 | 使用场景 |
|---|---|---|---|---|
| 本地绝对路径 D:/xxx | ✅ | ❌ | ⭐ | 禁止上线，仅本地临时测试 |
| 相对路径 ./../ | ✅ | ✅ | ⭐⭐⭐⭐⭐ | 静态页面、官网、大部分前端项目首选 |
| 网络 https 路径 | ✅ | ✅ | ⭐⭐⭐ | CDN 自有资源；谨慎引用第三方图 |
| 根相对路径 / | ❌ | ✅ | ⭐⭐⭐⭐ | 大型项目、后台系统、路由复杂项目 |
企业项目标准习惯：新建
images/assets文件夹统一存放图片资源，所有本地图片统一使用相对路径管理，打包迁移、上传服务器基本不会炸图。
七、综合实战代码（可直接复制运行）
新建目录结构：
5.2-demo/
├─ index.html
└─ images/
└─ dog.jpg
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片路径实战</title>
</head>
<body>
<h2>图片路径演示</h2>
<!-- 相对路径：下一级images文件夹 -->
<img src="images/dog.jpg" alt="小狗图片" width="300">
<!-- 网络路径示例 -->
<img src="https://picsum.photos/300/200" alt="随机示例图">
</body>
</html>
搭配 VSCode Live Server 插件打开，实时预览。
八、课后练习
搭建目录，写出对应路径：
project/
├─ assets/
│ └─ logo.png
└─ html/
└─ test.html
问：test.html 里面引用 logo.png，src 应该怎么写？ 答案：../assets/logo.png
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/wuzuhuzhanlang/article/details/170243903
