本文系统讲解 HTML 中 标签 src 属性的路径书写规则，涵盖同目录、子目录、上级目录三种常见场景，并提供可直接复用的代码示例与实用避坑提示。
本文系统讲解 html 中 `` 标签 `src` 属性的路径书写规则，涵盖同目录、子目录、上级目录三种常见场景，并提供可直接复用的代码示例与实用避坑提示。
在 HTML 中， 标签的 src（source）属性用于指定图像资源的相对或绝对路径。对初学者而言，src 值写错是图像无法显示的最常见原因——它并非“随便粘贴网址”，而是需严格遵循文件系统中的实际位置关系。下面按典型项目结构逐类说明。
✅ 1. 图像与 HTML 文件在同一目录
这是最简单的情况。只需写文件名加扩展名（如 .jpg、.png），无需斜杠：
@@##@@ @@##@@
⚠️ 注意：文件名区分大小写（Logo.png ≠ logo.png），且确保扩展名拼写准确（常见错误：.jgp、.pnj）。
✅ 2. 图像存放在子文件夹中（推荐组织方式）
若你创建了 images/ 文件夹存放所有图片，则路径为 子文件夹名/文件名：
立即学习“前端免费学习笔记（深入）”；
@@##@@ @@##@@
✅ 小技巧：用 images/ 统一管理图片，既清晰又便于后期维护。
✅ 3. 图像存放在上级目录或更外层目录
使用 ../ 表示“返回上一级目录”。每多一个 ../ 就向上跳一层：
- 图像在 HTML 文件的父目录下：
@@##@@
- 图像在父目录的 assets/ 文件夹中：
@@##@@
- 需要向上跳两级（如从 project/pages/ 指向 project/assets/）：
@@##@@
⚠️ 关键注意事项（新手必看）
-
不要复制网页图片 URL 直接填入 src：https://... 是网络地址，而本地开发时 src 默认解析为本地文件路径；除非你明确使用在线图床（如
），否则粘贴 Google 图片链接必然失败。 - 路径中禁止中文和空格：建议用英文命名（my_photo.jpg 而非 我的照片.jpg），避免编码问题。
- 检查浏览器开发者工具（F12 → Console / Network）：若图片不显示，这里会明确提示 404 Not Found 及实际请求的路径，是定位路径错误的最快方式。
- alt 属性不可省略：它不仅是“备用文字”，更是无障碍访问（屏幕阅读器）和 SEO 的重要组成部分。
掌握这三类路径规则，90% 的 src 问题都能迎刃而解。记住核心原则：src 是文件系统中的“找路指令”，不是搜索关键词——你得告诉浏览器“从当前 HTML 文件出发，往哪走、走几步、找到哪个文件”。 多练习几次目录跳转，路径思维自然形成。
