根本原因是CSS中background-image的url()相对路径以CSS文件自身位置为基准，而非HTML页面位置；例如CSS在/css/style.css中写url(../images/logo.png)，浏览器始终从/css/上一级即根目录找/images/logo.png。
CSS 文件里 background-image 路径突然找不到图片了
根本原因不是图片丢了，而是 CSS 中的相对路径以 CSS 文件自身位置为基准，而不是 HTML 页面。比如 HTML 在 /index.html，CSS 在 /css/style.css，而你在 CSS 里写 url(../images/logo.png)，那浏览器就会去 /images/logo.png 找——但如果 HTML 改到 /admin/index.html，这个路径依然不变，因为解析权在 CSS 文件上。
用 url() 的相对路径时，必须按 CSS 文件所在目录算起
这是最常被忽略的基准规则。很多开发者习惯按 HTML 页面结构写路径，结果换目录就挂。
- 如果 CSS 文件在
/static/css/main.css，想引用/static/images/icon.svg，就得写url(../images/icon.svg) - 如果图片和 CSS 同级（都在
/css/下），就直接写url(icon.png)，不用加./ -
url(/images/logo.png)是绝对路径（从域名根开始），和 CSS 位置无关，但部署到子路径（如https://example.com/app/）时容易出错
Webpack/Vite 等构建工具中，url() 路径会被重写，但前提是你没写死 http:// 或协议相对路径
构建工具能识别并自动拷贝、哈希、重写 url(./xxx) 或 url(../xxx)，但一旦你写成 url(https://cdn.example.com/logo.png) 或 url(//cdn/logo.png)，它就完全不管了。
- 确保所有本地资源都用相对路径（
./、../或无前缀） - Vite 默认支持
url(../assets/img.jpg)并正确解析；Webpack 需确认css-loader的url选项为true - 如果用了
public/目录（Vite）或static/（Vue CLI），路径要对应：比如public/logo.png→url(/logo.png)
调试技巧：右键「检查元素」看 computed 样式里的 background-image 实际加载地址
浏览器 DevTools 的 Computed 面板会显示最终解析后的完整 URL，点进去能立刻判断是路径拼错、404 还是跨域问题。
立即学习“前端免费学习笔记（深入）”；
- 如果显示
url(http://localhost:3000/css/../images/x.png)，说明路径已解析，但服务器返回 404 → 检查文件是否真在那个位置 - 如果显示
url(file:///...)且打不开 → 本地双击 HTML 运行，没有 HTTP 服务，部分路径（尤其是跨目录）会被浏览器拦截 - Chrome 地址栏输入那个完整 URL，看能否直连图片，能排除 CSS 解析问题
