CSS background-image无法加载且代码URL路径自动变更问题

问题成因 #

该问题是路径自动处理机制修改了CSS中的相对路径导致，常见触发原因如下：

• 前端构建工具的路径重写逻辑：使用webpack、Vite、Rollup等构建工具时，默认会对CSS内的相对路径进行解析重写，以匹配打包后的文件输出目录。如果构建配置中的publicPath、CSS loader的路径处理规则不符合你的实际目录结构，就会出现将../误改写为./的情况。
• CSS预处理器的路径处理：如果使用Sass、Less等预处理器，部分版本的默认配置会自动转换CSS内的相对路径，转换逻辑不符合预期时也会修改路径前缀。
• 服务端/CDN的内容替换规则：如果站点部署时配置了Nginx、Apache重写规则，或者开启了CDN的资源路径优化功能，这些规则可能误匹配到CSS内容里的路径字符串，错误修改了路径前缀。

解决方法 #

可以根据你的实际场景选择以下方案，无需调整现有目录结构：

• 关闭构建工具的CSS自动路径解析：如果使用webpack，可在css-loader配置中添加url: false关闭路径自动处理；如果使用Vite，可在配置文件中关闭css.preprocessorOptions对应的路径转换规则，保留你写的原始路径。
• 使用站点根目录绝对路径：将资源路径改为从站点根目录开始的绝对路径，例如background: url(/img/homeTrans2.svg) no-repeat top right/ cover;，完全规避相对路径的自动处理逻辑，只要img文件夹部署在站点根目录就能正常加载。
• 配置路径别名：在构建工具中配置资源路径别名，例如将@img映射到本地img文件夹的绝对路径，之后在CSS中按别名写法引用background: url(~@img/homeTrans2.svg) no-repeat top right/ cover;，构建工具会自动替换为正确的路径，不会出现误改问题。
• 调整服务端/CDN配置：如果排查确认是服务端或者CDN的规则导致路径被修改，调整对应的重写规则，排除对CSS文件内容的路径替换即可。

内容的提问来源于stack exchange，提问作者Dreigonnadoit