第一反应是打开DevTools→Network面板，刷新并过滤img，点开404请求看Request URL和Status；Request URL是真实路径，Status为404/403/blocked分别对应路径错、权限或防盗链、CSP等问题。
直接看 Network 面板里的 Request URL
图片加载失败，第一反应不该是改代码，而是打开浏览器 DevTools → Network 面板，刷新页面，过滤 img 或直接找 404 请求。点开那个失败的图片请求，重点看两处：
-
Request URL：浏览器实际发出去的地址，它才是“真实路径”——别信你写的 src 值，要看这个 -
Status：404 表示路径错或文件不存在；403 很可能是防盗链或权限问题；blocked可能是 CSP 或 mixed content
把 Request URL 复制出来，粘贴到新标签页里直连。如果也 404，说明服务端根本没这资源；如果能打开，说明前端路径写对了，问题在别的地方（比如 JS 动态赋值覆盖、CSS display: none 隐藏）。
区分相对路径和绝对路径的基准点
路径错不是“写错了”，而是“算错了起点”。HTML 中 src 的解析基准永远是当前 HTML 文件所在位置，不是你编辑器打开的目录，也不是服务器根目录。
-
src="images/logo.png"→ 从当前 HTML 所在目录开始找images/子目录 -
src="/images/logo.png"→ 从网站根目录（http://host/后面）开始找，要求文件真在服务根下的/images/ -
src="../assets/icon.svg"→ 先退一级目录，再进assets/
本地双击 HTML（file:// 协议）时，/ 开头的路径会指向系统根目录（如 C:/），必然失败。必须起本地服务（如 python3 -m http.server 8000）才能正确验证 / 路径。
检查渲染后的真实 DOM 和文件系统一致性
动态生成的页面（React/Vue/模板引擎）容易出现 src 是空字符串、undefined 或拼接错误。右键 → “查看网页源代码”看到的是服务端吐出的原始 HTML，不包含 JS 渲染结果；而 Elements 面板里的是最终 DOM。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在 Elements 面板中定位
src属性存在且值非空 - 检查文件名大小写：Linux/macOS 服务器严格区分
Logo.png和logo.png - 检查扩展名是否一致：
.jpg≠.jpeg，.webp在旧浏览器中无 fallback 就会空白 - 避免
src=""：某些浏览器会重新请求当前页面 URL，造成意外跳转或 404
可加防御性写法：imgEl.src = data.url || "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
绕过 CORS 和防盗链干扰判断路径本身
有时候图片显示正常，但控制台报 CORS 错误，或者 绘图失败——这不等于路径错，只是跨域策略限制。真正影响“是否显示”的，是图片能否被
- 去掉
crossorigin属性再试一次：如果去掉了就显示，说明服务端没配Access-Control-Allow-Origin - 遇到 403，检查 Referer 是否被拦截；可临时用本地代理（如
/api/proxy?url=xxx）绕过 - CSP 限制会静默阻止加载，看 Network 面板里请求是否根本没发出（状态为
(blocked:csp)）
最易忽略的一点：路径审查必须基于真实 HTTP 环境，而不是靠“看起来像对了”来判断。每次改完，都要回 Network 面板确认 Request URL 和你预期的物理文件路径是否完全一致——差一个字符、多一个斜杠、大小写不对，都是 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
