绝对路径在CSS中常导致图片404，因其基于网站根目录解析，而开发服务器或打包后路径常不匹配；相对路径以CSS文件位置为基准，最稳妥；调试应优先查看Network面板请求URL与状态码。
为什么绝对路径在CSS里经常找不到图片
因为CSS里的 url() 路径解析，完全依赖于**CSS文件的存放位置**，而不是HTML页面的位置。当你写 url(/assets/logo.png)，浏览器会从网站根目录找，但开发时本地服务器（比如 webpack-dev-server）往往不以根目录为服务起点，或者打包后资源被挪到 /static/ 下，导致 404。
CSS中改用相对路径最稳妥的做法
相对路径是 CSS 文件所在目录为基准，不受部署路径影响，兼容性最好，也无需构建工具介入。
- 假设
style.css在src/css/style.css，图片在src/assets/logo.png，就写url(../assets/logo.png) - 避免跨多层回退（如
../../../），容易出错；建议把 CSS 和相关资源尽量放得近一些 - 注意：VS Code 或 WebStorm 的路径提示可能“看起来对”，但实际运行仍 404——务必检查浏览器 Network 面板里请求的真实 URL 和状态码
- Webpack/Vite 默认支持相对路径，无需额外配置；但若用了
css-loader，确认没开esModule: false导致url()不被处理
用 Webpack 别名让 CSS 引用更清晰（需 loader 支持）
Webpack 本身不解析 CSS 里的 url() 别名，必须靠 css-loader + resolve.alias 配合，且只对 @import 和 url() 中带引号的路径生效。
- 在
webpack.config.js中配置别名：resolve: { alias: { '@assets': path.resolve(__dirname, 'src/assets') } } - 同时确保
css-loader版本 ≥ 5.0，并启用url: true（默认开启） - CSS 中这样写：
url('~@assets/logo.png')—— 注意前面的~，这是css-loader识别别名的标记，缺了就不生效 - 别名路径里不能有空格或中文；
~@assets/和~@assets效果不同，后者会被当作完整模块名处理，推荐统一加尾部斜杠
图片失效时优先排查这三件事
很多问题其实卡在基础链路上，而不是路径写法本身。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具 → Network 标签页，过滤
img或media，看请求地址是否拼错、状态码是不是 404 或 403 - 右键图片元素 → “Open in new tab”，观察地址栏 URL 是否符合你预期的静态资源服务路径（比如是不是漏了
/dist前缀） - 如果用了
file://直接打开 HTML，所有url()都会失效——CSS 的相对路径在 file 协议下受限，必须走本地服务器
~ 或 loader 版本不对，就静默失败。调试时盯住 Network 面板，比反复改路径更省时间。 
