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

为图像（jpeg，jpg，png，gif）的文件加载器中的选项中添加 esModule：false ，

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

为我工作！

我从404-not-found-webpack-image

得到了答案

Webpack图像未加载404

1 个答案: