答案是相对路径以HTML文件物理位置为基准：浏览器解析src时始终以当前HTML文件所在目录为起点，非项目根、非地址栏URL、非编辑器打开路径；双击本地HTML时/开头路径指向磁盘根而非站点根，应避免，统一用相对路径或本地HTTP服务器。

相对路径以 HTML 文件位置为基准

浏览器解析 src 时，起点永远是当前 HTML 文件所在的目录，不是项目根目录、不是 JS 文件位置、也不是你 VS Code 里当前打开的文件夹。写错就静默失败——没报错，图就是不显示。

• src="logo.png"：图片和 HTML 在同一目录，最安全，可直接用
• src="images/photo.jpg"：同级有个 images 文件夹，里面放着图片（./ 可省略，不建议加）
• src="../assets/icon.svg"：.. 表示退一层，必须严格数清层级；多一个或少一个点，立刻 404
• 路径里禁用反斜杠 \，哪怕你在 Windows 上编辑，也必须写 /，否则部分浏览器会忽略或截断

常见错误：双击打开 HTML 时 / 开头路径失效

本地双击 HTML 文件，地址栏显示 file:///xxx/index.html，此时 src="/images/cover.jpg" 会被解析成磁盘根目录下的 /images/cover.jpg，几乎必然 404。这不是 bug，是协议行为。

• 开发阶段一律避免以 / 开头的 src，除非你明确运行在本地服务器（如 Vite、Live Server）且已配好 root
• VS Code Live Server 默认把项目根设为服务器根，这时 /img/logo.png 才有效；但双击打开就不行
• 路径区分大小写：Photo.jpg ≠ photo.jpg，部署到 Linux 服务器后尤其容易栽跟头

动态设置 src 时容易漏掉的三件事

JS 赋值 img.src = url 或框架绑定 :src="url"，路径逻辑没变，但执行上下文更易出岔子。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 确保 url 不是空字符串、undefined 或 null，否则浏览器可能加载默认图标或触发控制台警告
• 字符串拼接路径（如 "images/" + name + ".png"）不会被 Webpack/Vite 自动重写，构建后可能失效
• 推荐用 import 引入图片：import avatar from './avatar.png'，构建工具返回真实打包路径，直接赋给 src 才可靠

SSR 或构建工具环境下路径怎么处理

服务端渲染时，Node.js 环境无法解析浏览器相对路径；Vite/Webpack 也只重写静态字符串，不碰变量。

立即学习“前端免费学习笔记（深入）”；

• SSR 场景下，src 值必须是完整 URL（如 https://cdn.example.com/logo.png）或由构建工具注入的公共路径前缀（如 import.meta.env.BASE_URL）
• public/ 目录下的资源（如 public/icon.png）可用 src="/icon.png"，但前提是构建工具配置了 base 且服务器部署路径匹配
• Nginx 部署到子路径（如 /blog/）时，若没配 base href 或 publicPath，所有以 / 开头的 src 都会指向错误位置

路径问题从来不是“写对就行”，而是“HTML 在哪、谁在解析、什么时候解析”三个环节都得对上。最容易被忽略的是：开发时能跑，是因为开发服务器做了 fallback；上线后 Nginx 没配，404 就来了。