Webpack image doesn't load 404

Question

Im working with react and webpack and I am trying to load images but getting 404.

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

The path is something like assets/images/img.png. Assets folder is near the src where all the application files is.

I tried with webpack-file-loader but I can't figure out how to solve the 404 issue.

here is my loader to file-loader I tried few options:

like this:

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

this:

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

this:

  {
    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/',
    },
  },

All the above options gave me the same result. Any ideas?

@MarekTakac no because the image is coming from parameter. I don't know what image to import. I figure a way to make it work with `webpack-copy-plugin`, I think file loader is good only when you explicitly import the files. Am I right? — tubu13, Jun 28 '18 at 07:33

score 1 · Answer 1 · answered Mar 01 '20 at 19:10

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

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

Worked for me!

I got answer from: 404-not-found-webpack-image

Webpack image doesn't load 404

1 Answers1