这个报错我之前也碰到过，大概率是webpack的配置冲突或者依赖没装全导致的，咱们一步步来解决：

1. 移除重复的旧版配置 #

你同时在module.rules和module.loaders里配置了相同的图片规则，但从webpack 2.x开始，官方就推荐使用module.rules来定义loader规则，module.loaders是旧版语法，两者共存可能会导致解析冲突。直接删掉module.loaders里的那部分配置，只保留module.rules中的规则即可。

修正后的webpack.config.js核心配置：

module: {
  rules: [
    // 记得保留处理js/jsx的babel-loader等其他规则
    {
      test: /\.(png|jpg|gif)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192, // 小于8kb的图片转为base64嵌入代码
          },
        },
      ],
    },
  ],
}

2. 确保安装了必要的依赖 #

url-loader本身依赖file-loader来处理超过limit大小的图片文件，如果没装file-loader，webpack会无法解析大图片，进而抛出类似错误。执行下面的命令安装依赖：

npm install url-loader file-loader --save-dev
# 或者用yarn
yarn add url-loader file-loader -D

3. 验证图片路径和导入方式 #

你的导入import addrecipe from '../../images/addrecipe.png';和使用<img src={addrecipe} />的方式是正确的，但可以确认一下../../images/addrecipe.png这个路径是否真的存在，比如检查项目目录结构，确保图片文件没有放错位置。

4. 针对Webpack 5的特殊处理（如果你的webpack是5.x版本） #

如果用的是Webpack 5，官方已经内置了asset modules来替代url-loader和file-loader，你也可以直接改用内置方案，配置会更简洁：

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/i,
      type: 'asset',
      parser: {
        dataUrlCondition: {
          maxSize: 8192 // 小于8kb转为base64
        }
      }
    }
  ]
}

做完这些步骤后，重启webpack开发服务器，应该就能正常加载图片了。

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