浏览器 Network 面板中 background-image 的 Request URL 是解析后的实际请求地址，需据此排查 404 或显示异常；其基准是构建后 CSS 文件所在目录，非源码路径或 HTML 位置，且须结合 publicPath、部署路径及模块导入等方式确保正确。
看浏览器 Network 面板里 background-image 的 Request URL
直接打开 DevTools → Network → 切到 Img 标签页，刷新页面，找到红色 404 的图片请求。点开它，看 Request URL 是什么——这才是浏览器实际尝试访问的地址，不是你写的那行 url(...)，而是解析后的结果。
常见错误现象：
-
Request URL显示为http://localhost:3000/css/../images/logo.png→ 说明路径已解析，但服务器没这个文件 -
Request URL是file:///C:/project/images/logo.png→ 本地双击 HTML 打开，没起服务，跨目录路径被浏览器拦截 - 请求返回 200 但图不显示 → 可能是容器无宽高、
background-size拉伸失真，或 CSS 优先级被覆盖
确认 CSS 文件物理位置再算相对路径
url() 的基准永远是最终生成的 CSS 文件所在目录，不是 index.html，也不是源码里的 .scss 路径。构建后路径变了，但你写的 url("../images/bg.png") 还按旧结构算，就必然 404。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开
dist目录，肉眼数清楚：CSS 文件在dist/css/app.css，图片在dist/images/icon.svg→ 中间差一级，要写url("../images/icon.svg") - 如果图片和 CSS 同级（都在
dist/css/下），就直接url("icon.png")，别加./—— 工具链对它的处理不一致 - 避免在源码里硬写
../：SCSS 中url("../img/x.png")开发时可能对，构建后常多退或少退一级
Webpack/Vite 项目必须配 MiniCssExtractPlugin.publicPath
Webpack 用 MiniCssExtractPlugin 抽离 CSS 后，url() 路径不会自动适配新位置。比如 CSS 输出到 dist/css/，图片在 dist/img/，就得告诉插件：“所有 url() 往上跳一级才能触达资源”。
正确配置方式（仅影响 CSS 内部 url，不干扰 JS 或 HTML）：
use: [{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: '../' }
}]
容易踩的坑：
- 在
output.publicPath里设'../'→ 全局生效，JS 引用也错乱，引发连锁 404 - Vue CLI 3+ / Vite 项目不推荐手写
url()，优先把图片放public/目录，然后用url("/logo.png") -
css-loader的url选项必须为true（默认开启），否则url()直接被忽略
绝对路径 /xxx 在子路径部署时会失效
url("/images/logo.png") 看似一劳永逸，但它从域名根开始找，遇到 https://example.com/my-app/ 这类子路径部署就挂了——浏览器会去请求 /images/logo.png，实际资源在 /my-app/images/logo.png。
替代方案：
- Vite 项目：图片放
public/，用url("/logo.png")，配合base: "/my-app/"配置自动修正 - Webpack 项目：用
assetPrefix或output.publicPath统一前缀，但需确保只作用于静态资源 - 最稳的写法：改用 JS 导入图片，
import logo from "@/assets/logo.png"，再传给 CSS 变量或内联样式，路径由模块系统解析
Computed 面板里解析出的完整 URL，才是唯一真相。 
