HTML图片不显示90%是路径错误：相对路径以HTML文件所在目录为基准，src="logo.png"表示同级，src="images/a.jpg"表示同级子目录，src="../assets/b.svg"表示上级目录；双击打开时以file://协议解析，/开头路径指向磁盘根目录而非项目根，应避免；Windows禁用反斜杠，路径区分大小写。
HTML 模板里图片不显示，90% 是路径写错了，而不是图片坏了或标签漏了。 直接双击打开 HTML 文件、用 VS Code Live Server 启动、部署到 Nginx —— 这三种场景下，src 的解析逻辑完全不同。别靠“看着像对”来判断，得按浏览器实际解析规则来写。
相对路径怎么写才真正可靠
相对路径的基准永远是 当前 HTML 文件所在目录，不是你编辑器里打开的文件夹，也不是你双击时所在的窗口路径。写错就 404，没商量。
-
src="logo.png"：图片和 HTML 在同一级目录，最常用也最安全 -
src="images/icon.jpg"：图片在同级的images子目录下（注意不用./images/，./可省） -
src="../assets/photo.svg"：图片在上一级目录的assets文件夹里（..表示上级，不能写成.././或..\） - Windows 下别用反斜杠：
src="imagescat.jpg"是无效的，浏览器只认/ - 路径区分大小写：
Logo.png≠logo.png，Linux 服务器上线后必翻车
为什么 /images/xxx.jpg 在双击打开时总 404
以 / 开头的路径，在 file:// 协议下指向的是你电脑的磁盘根目录（比如 file:///C:/images/xxx.jpg），不是你的项目根。这是本地开发最常踩的坑。
- 双击 HTML 打开 → 地址栏是
file:///D:/my-site/index.html→src="/images/a.png"会去找file:///images/a.png，直接 404 - 用
python3 -m http.server或 Live Server 启动 → 地址变成http://localhost:8000/index.html→ 此时/images/a.png才真正指向项目根下的images目录 - 结论：
/xxx类路径只在 Web 服务器环境下有意义，本地双击时一律避免
src 值为空、拼错、漏扩展名的典型表现
这些错误不会报语法错误，但图片就是不出现，控制台却可能安静得诡异。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
src=""或src=" "：触发一次空请求，Chrome 控制台显示GET file://// 404 -
src="icon"（漏了.png）：浏览器不会自动补扩展名，直接 404 -
src="imags/logo.png"（images拼错）：路径不存在，Network 面板明确显示 404 -
src="data:image/svg+xml,%3Csvg..."：能用，但仅适合小图标占位，别塞大图，HTML 体积暴涨
什么时候该用绝对 URL，什么时候必须避开
绝对 URL 分两类，别混用。一类是带协议的完整地址，一类是网站根路径，它们生效前提完全不同。
- 网络图片必须用完整 URL：
src="https://cdn.example.com/avatar.jpg"，否则浏览器不知道协议和域名 -
src="/static/logo.png"：只在你明确控制服务器根目录时才可用（如 Nginx 的root /var/www/html;），本地开发若没起服务，它就失效 -
src="C:projectimgg.jpg"或src="/Users/name/project/bg.jpg"：完全无效，HTTP 环境下浏览器根本不会尝试加载 - 临时调试可右键图片 → “检查元素” → 把鼠标悬停在
src值上，Chrome 会显示它最终解析成的完整 URL，点一下就能验证是否可达
最易被忽略的一点：路径问题往往藏在嵌套层级里。比如 HTML 在 /blog/post.html，引用 ../assets/logo.png 是对的；但如果把 post.html 移到 /archive/2026/post.html，这个路径就得改成 ../../assets/logo.png —— 路径是静态的，不随文件移动自动更新。
