React中img标签图片路径正常，CSS背景图路径失效求助

问题根源 #

• JSX里的<img src="/images/test.jpg">能正常加载，是因为Create React App（CRA）默认将public目录作为静态资源根目录，所有以/开头的路径都会指向public下的文件。
• CSS中的background-image: url("/images/test.jpg")失效，核心原因是CSS的URL解析规则与JSX不同：css-loader会把根路径的URL当成相对当前CSS文件的路径去查找，而你的CSS文件位于src/styles下，向上查找找不到images文件夹，因此报错Can't resolve '../images/test.jpg'。
• 你配置的webpack别名和tsconfig paths仅对JS/TS模块生效，CSS文件里的URL不会识别这些别名。

解决方案 #

方案1：使用相对路径指向public目录的图片 #

直接修改CSS中的路径为从当前CSS文件到public/images的相对路径：

/* src/styles/_globals.scss */
background-image: url("../../public/images/test.jpg");

该方法无需修改配置，直接生效，适合简单场景。

方案2：修改webpack配置，让CSS识别根路径指向public #

更新config-overrides.js，添加对css-loader的配置，将根路径的URL映射到public目录：

const path = require('path');

module.exports = function override(config, env) {
  if (env === "production") {
    config.output = {
      ...config.output,
      publicPath: '/'
    };
  }

  // 定位处理SCSS的规则，修改css-loader配置
  const cssRule = config.module.rules.find(rule => 
    Array.isArray(rule.oneOf) && rule.oneOf.some(r => r.test?.test('.scss'))
  );
  
  if (cssRule) {
    cssRule.oneOf.forEach(loader => {
      if (loader.use?.some(u => u.loader?.includes('css-loader'))) {
        const cssLoader = loader.use.find(u => u.loader.includes('css-loader'));
        cssLoader.options = {
          ...cssLoader.options,
          url: {
            resolve: (url, resourcePath) => {
              // 把根路径的URL解析到public目录
              if (url.startsWith('/')) {
                return path.resolve(__dirname, 'public' + url);
              }
              return url;
            }
          }
        };
      }
    });
  }

  config.resolve = {
    ...config.resolve,
    alias: {
      ...config.resolve.alias,
      'images': path.resolve(__dirname, 'public/images')
    },
  };

  return config;
};

修改后，你可以继续在CSS中使用background-image: url("/images/test.jpg")。

方案3：在JSX中导入图片，通过style属性设置背景图 #

利用CRA的模块解析能力，自动处理开发与生产环境的路径：

// 组件文件中
import testImage from 'images/test.jpg';

function MyComponent() {
  return (
    <div style={{ backgroundImage: `url(${testImage})` }}>
      {/* 组件内容 */}
    </div>
  );
}

该方法无需修改CSS配置，且图片会被webpack自动优化（如哈希命名、压缩），适合需要动态切换背景图的场景。

额外提示 #

• 你的tsconfig.json中重复设置了baseUrl: "."，建议删除其中一个，避免配置混淆。
• 使用react-app-rewired时，确保所有依赖版本兼容，避免出现配置冲突。

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