图片src 404的首要排查步骤是打开浏览器开发者工具Network标签页，筛选Img请求，查看404项的Request URL确认实际请求路径，重点检查相对路径解析偏差（如./导致多一级目录）、服务器静态资源目录未正确托管、文件名大小写不一致、框架中import/require路径与直接src写法混淆等问题。
图片 src 404 是最常见原因，先看浏览器开发者工具的 Network 标签页
直接打开 DevTools（F12），切到 Network 标签，刷新页面，筛选 Img 或按 Ctrl+Shift+R 强制刷新。找到状态码为 404 的图片请求，点开看它的 Request URL —— 这个地址就是浏览器实际尝试加载的位置，不是你写的相对路径，而是解析后的绝对路径。
常见错误现象：src="./images/logo.png" 在页面 URL 是 http://localhost:3000/user/profile 时，实际请求会变成 http://localhost:3000/user/images/logo.png（多了一级 user/），因为 ./ 是相对于当前 HTML 所在路径，不是项目根目录。
- 用
src="/images/logo.png"（开头带/）强制从站点根目录开始找 - 确认服务器静态资源目录是否真包含该路径，比如 Express 默认不托管
public/images/，就得显式配置app.use(express.static('public')) - 检查文件名大小写：Linux 服务器区分
Logo.png和logo.png，本地开发可能不报错，部署后就 404
Vue/React 等框架里用 require() 或 import 加载图片，路径解析逻辑完全不同
框架会把图片当模块处理，路径是相对于 JS 文件，不是 HTML。比如在 src/components/Header.jsx 里写 import logo from '../assets/logo.png'，Webpack/Vite 会把它转成哈希文件名并注入 public 目录或 base64，此时直接写 src="../assets/logo.png" 反而会失败。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 静态资源放
public/目录下可直接用绝对路径：src="/logo.png"（Vite）或src={process.env.PUBLIC_URL + "/logo.png"}（CRA） - 用
import或require()时，路径必须能被打包器识别，不能是拼接字符串：src={require(`../assets/${name}.png`)}可行，但src={`../assets/${name}.png`}不行 - Vue 单文件组件中，
<img :src="require('./icon.svg')" alt="HTML前端调试怎么排查图片路径加载失败" >要加:绑定，否则当成字面量字符串
图片加载失败后如何快速定位是路径问题还是跨域/CSP 问题
如果 Network 里请求状态是 0（而不是 404 或 403），大概率是跨域或内容安全策略（CSP）拦截。这时候看 Console 里的错误信息更关键：
立即学习“前端免费学习笔记（深入）”；
-
Blocked by CORS policy: No 'Access-Control-Allow-Origin' header→ 图片服务器没配 CORS，换域名或代理 -
Refused to load the image because it violates the following Content Security Policy→ 检查<meta http-equiv="Content-Security-Policy">或服务器响应头里的img-src指令 - 图片 URL 是
data:开头但显示为空白 → 可能 base64 编码损坏，或长度超浏览器限制（部分旧版 Safari 对 data URL 长度敏感）
<img alt="HTML前端调试怎么排查图片路径加载失败" > 的 onerror 事件只能捕获加载失败，不能自动修复路径
很多人想用 onerror="this.src='fallback.png'" 当兜底，但它只在当前 src 加载失败后触发一次，且无法知道原路径错在哪。它适合降级展示，不适合调试。
- 调试阶段建议临时加
console.log打印实际src值：<img :src="imgUrl" alt="HTML前端调试怎么排查图片路径加载失败" > console.warn('Image load failed:', e.target.src)"> - 服务端渲染（SSR）场景下，
onerror在服务端不执行，只在客户端生效，别依赖它做首屏容错 - 注意
onerror会冒泡，如果父元素也监听了error，可能被误触发
Request URL。 
