React项目自动处理JSX图片资源引入的方案及加载器咨询

针对存量JSX文件中大量硬编码相对路径img标签的场景，不需要手动逐行修改代码，直接通过构建层工具做自动解析适配即可，以下是经过验证的可行方案：

• Babel插件自动转换（适配所有React构建工具栈：Webpack/Vite/Rollup等）
  用babel-plugin-transform-react-jsx-img-src在AST编译阶段处理所有JSX节点：插件会自动扫描所有<img>标签的src字符串属性，识别相对路径后自动完成静态资源引入、publicPath拼接逻辑，原有业务代码完全不需要改动。
  只需要在项目Babel配置中添加如下规则即可：

  {
    "plugins": [
      [
        "transform-react-jsx-img-src",
        {
          "publicPath": process.env.PUBLIC_URL,
          "assetRoot": "./src/assets"
        }
      ]
    ]
  }
  

  原有代码<img src="../assets/img/user/user-13.jpg" alt="" />编译后会自动生成和src={process.env.PUBLIC_URL + "/打包后静态资源路径"}完全等价的逻辑。
• Webpack专属JSX图片Loader
  如果项目是基于Webpack构建，可以使用jsx-img-loader做JSX源码预解析，这个Loader专门针对JS/JSX文件设计，不会像html-loader一样无法识别JSX语法。它会在Babel编译前扫描文件内所有img标签的固定相对路径，自动替换为符合Webpack静态资源处理规则的引入语句，兼容现有file-loader、Asset Modules等资源配置。
  在webpack配置中添加如下规则即可：

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          // 注意该Loader要放在babel-loader等JS处理Loader的最前面，优先执行
          {
            loader: 'jsx-img-loader',
            options: {
              srcRoot: path.resolve(__dirname, 'src/'),
              publicPath: process.env.PUBLIC_URL
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
  

• Vite项目轻量自定义插件
  Vite项目不需要安装额外依赖，可以直接写一个简单的转换插件，在transform钩子中通过正则或者轻量AST工具扫描JSX文件里的img标签固定路径，自动完成路径替换即可，逻辑和上述工具一致，可根据自身项目目录结构灵活调整。

注意：以上方案仅能处理静态硬编码的图片路径，如果代码中存在动态拼接的src（例如src={'../assets/' + name + '.jpg'}），这类路径构建阶段无法静态分析，需要单独处理。你提到的存量固定相对路径img标签，以上方案可实现全量自动适配，零手动代码修改。

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