tubu13
tubu13

Reputation: 934

Webpack image doesn't load 404

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?

Upvotes: 1

Views: 751

Answers (1)

S. Vladislav
S. Vladislav

Reputation: 44

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

Upvotes: 1

Related Questions