怎么在HTML代码里插入图片？相对路径与绝对路径用法-html教程-PHP中文网

图片不显示主因是路径错误，需按html文件位置解析相对路径，注意层级关系、大小写敏感、空格及特殊字符问题，并优先使用小写短横线命名的相对路径。

怎么在html代码里插入图片？相对路径与绝对路径用法

图片不显示，八成是路径问题。浏览器加载 <img src="..."> 时，会按当前 HTML 文件所在位置为基准解析路径——不是按编辑器打开位置，也不是按服务器根目录（除非你用的是以 / 开头的绝对路径）。相对路径依赖文件结构，一旦移动 HTML 或图片，就容易断链。

常见错误现象：404 Not Found 控制台报错、图片位置显示“破损图标”、开发者工具 Network 标签里 img 请求状态为 404。

误把图片放在 ./images/，却写成 src="images/logo.png"（漏了 ./，其实可省略，但结构错就会失效）
HTML 在子目录如 /pages/about.html，却用 src="logo.png" 去找同级图片，实际该写 src="../logo.png"
复制粘贴路径时多出空格或中文标点（比如全角引号、顿号），src=" logo.png " 或 src="logo.png　" 都会失败

相对路径从 HTML 文件所在目录出发，用 . 表示当前目录，.. 表示上一级目录，/ 是分隔符（不是根目录含义）。关键看 HTML 和图片在文件系统中的真实层级关系。

假设项目结构如下：

my-site/
├── index.html
├── logo.png
├── images/
│   └── banner.jpg
└── pages/
    └── article.html

那么在 index.html 中：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

而在 pages/article.html 中：

绝对路径有两种：一种是带协议的完整 URL（网络地址），一种是以 / 开头的服务器根路径。它们都不依赖 HTML 当前位置，但用途和限制不同。

完整 URL（如 src="https://example.com/images/icon.svg"）：适合引用 CDN 图片、外部资源；缺点是无法离线预览，且受 CORS 限制（跨域时 JS 可能读不到尺寸或像素）
服务器根路径（如 src="/images/logo.png"）：开头的 / 表示从网站根目录开始找，无论 HTML 在哪层子目录都有效；但仅在 Web 服务器环境下工作（直接双击打开 file:// 会失败，浏览器会尝试读取本地磁盘根目录）

开发阶段若用 VS Code Live Server、Vite、Next.js 等本地服务，/images/... 是安全的；若只是用文件管理器双击 HTML，就得改用相对路径或完整 URL。

Windows 对文件名大小写不敏感，但 Linux 服务器和大多数现代前端工具链（Webpack、Vite）是敏感的。写成 src="IMG.PNG" 而实际文件是 img.png，上线后必然 404。

确保扩展名完全一致：.jpg ≠ .jpeg，.png ≠ .PNG
路径中避免空格和中文：浏览器会自动编码空格为 %20，但易出错；建议用短横线代替，如 user-avatar.jpg 而非 user avatar.jpg
URL 编码特殊字符：如果路径含 +、#、?，需手动编码（如 # → %23），但更稳妥的做法是重命名文件避开这些字符