Webpack镜像未加载404

Question

我正在使用react和webpack，我正在尝试加载图像，但得到了404。

const ImageComponent = ({ path }) => (
    <img src={path} />
);

路径类似于assets/images/img.png。Assets文件夹位于所有应用程序文件所在的src附近。

我试过使用webpack-file-loader，但我想不出如何解决404问题。

这是我的file-loader加载器，我尝试了几个选项：

如下所示：

  {
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|otf)$/,
    loader: 'file-loader',
    exclude: /(node_modules)/,
  },

这一点：

  {
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|otf)$/,
    loader: 'file-loader',
    exclude: /(node_modules)/,
    include: [
      path.resolve(__dirname, 'assets/img'),
    ],
  },

这一点：

  {
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|otf)$/,
    loader: 'file-loader',
    exclude: /(node_modules)/,
    include: [
      path.resolve(__dirname, 'assets/img'),
    ],
    options: {
      publicPath: '/',
      outputPath: 'assets/',
    },
  },

以上所有选项都给了我相同的结果。有什么想法吗？

Answer 1

Add esModule: false to the options for file-loader of image(jpeg，jpg，png，gif)

{
  test: /\.(jpe?g|png|gif)$/,
  loader: 'file-loader',
    options: {
      esModule: false,
      outputPath: 'assets/',
    },
}

对我很管用！

我得到的答案是：404-not-found-webpack-image