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