Reputation: 934
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
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