根本原因是CSS中url()路径以最终生成的CSS文件位置为基准解析，而非源文件或HTML位置；构建后CSS与图片目录分离导致相对路径失效，需通过MiniCssExtractPlugin.publicPath等配置修正路径映射。
CSS里background-image的url()路径为什么总404
根本原因不是写错了，而是路径解析基准被误判了——url()里的相对路径，永远以**最终生成的 CSS 文件所在位置**为起点，不是 HTML 文件，也不是原始 .scss/.less 源文件位置。Webpack/Vue CLI 构建后，CSS 被抽离到 dist/css/，而图片在 dist/img/，此时写 url("img/logo.png") 就会变成请求 dist/css/img/logo.png（不存在），实际该去 dist/img/logo.png。
- 用开发者工具 Network 面板看报错请求的
Request URL，确认它到底想访问哪条路径 - 打开 dist 目录，肉眼数清楚 CSS 文件和目标图片之间的目录层级关系
- 避免在源码里硬写
../：SCSS 中url("../img/logo.png")在开发时可能对，但构建后可能多退一级或少退一级
Vue CLI 项目 build 后 CSS 图片 404 怎么修
核心是让 Webpack 知道：CSS 输出到 dist/css/ 后，里面的 url() 应该“向上跳两级”才能触达 dist/img/ 或 dist/fonts/。这靠 ExtractTextPlugin（旧版）或 MiniCssExtractPlugin（新版）的 publicPath 配置实现。
- Vue CLI 2：改
build/utils.js中ExtractTextPlugin.extract()的publicPath: "../../" - Vue CLI 3+ / Vite：在
vite.config.js的build.rollupOptions.output.assetFileNames不直接管路径；改build.assetsInlineLimit或统一用public/目录放静态资源，CSS 中写url("/logo.png") - 若图片在
src/assets/，优先用@import "@/assets/logo.png"方式由 webpack 处理，而不是手写url()
Webpack 中 css-loader 的 context 和 publicPath 到底谁说了算
css-loader 解析 url() 时，先按 context（默认是 webpackConfig.context，通常是项目根目录）找文件，再由 MiniCssExtractPlugin 输出 CSS 时，用它的 publicPath 重写所有资源引用路径。两者不一致就会出错。
- 确保
css-loader的options.url为true（默认开启），否则url()直接忽略 -
MiniCssExtractPlugin的publicPath必须匹配最终 CSS 文件在服务器上的 URL 位置。例如 CSS 地址是/css/app.css，图片在/img/icon.png，那publicPath应设为"../" - 不要同时设
output.publicPath和MiniCssExtractPlugin.publicPath，后者优先级更高，且更精准
Django 模板中 CSS 引入后图片 404 怎么办
Django 不允许 CSS 文件里直接写 url("img/logo.png") 这种相对路径，因为静态文件服务机制完全由 STATIC_URL 和 {% static %} 控制。CSS 本身是静态资源，它内部的 url() 必须也走 Django 的静态路径体系。
- 别在 CSS 文件里写死相对路径；把图片路径写成
url("{% static 'img/logo.png' %}")—— 但这仅在 CSS 被 Django 模板引擎解析时有效（即内联在 HTML 中或用{% include %}） - 更稳妥的做法：把 CSS 也放进
static/，图片放static/img/，然后在 CSS 中写url("/static/img/logo.png")（前提是STATIC_URL = "/static/"） - 检查
settings.py中STATICFILES_DIRS是否包含你放 CSS 的目录，否则collectstatic根本不会复制它
最易被忽略的一点：Webpack 或 Vue CLI 项目里，publicPath 是个运行时概念，它影响的是最终浏览器发出的请求路径，不是构建时的文件拷贝逻辑。调错一个斜杠，整个图片链就断掉，而且错误只在 build 后暴露，开发时一切正常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
