webpack在js中使用require引入图片打开链接没有内容

Question

在react中使用require引入本地的图片

require('images/default-avatar.jpg');

在网页上图片没有报404但是打开链接是一片黑色的，没有图片内容，请问这是什么原因呢？
这里是webpack的部分配置：

module: {
    rules: [
      { test: /\.css$/, use: ['css-loader', 'style-loader'] },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: [
            require.resolve('babel-preset-es2015'),
            require.resolve('babel-preset-stage-0'),
            require.resolve('babel-preset-react')
          ]
        },
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpe?g)$/,
        use: ['file-loader', 'image-webpack-loader', {
          loader: 'url-loader',
          options: {
            limit: 10240,
            name: 'images/[name].[ext]'
          }
        }]
      }
    ]
  },
  resolve: {
    alias: {
      'images': path.resolve(__dirname, 'public/img')
    }
  }

这个default-avatar.jpg图片就存在public/img文件夹下面

Answer 1

增加一个 file-loader

Answer 2

options: {

        limit: 10240,
        name: 'images/[name].[ext]',
        esModule=false
      }

options 里面添加一个esModule=false 大概原因是你用的webpack5 这个时候图片的url属性是一个obj对象 你要么在require引入后面.defalut 要么就在options中加一个esModule=false
我也是最近学习webpack时候遇到的这个问题 希望帮到你