There are several threads about this one issue, but none of them have yielded any results to me so far. As the title suggests, my React project contains an img tag, where a png is provided as it's source.
So far, I have tried using requiring the path AND importing it as a variable. I have also added the loaders in my webpack config as you can see below.
Also of note is that the dimensions are actually loaded, and when right clicking to check the image source, the website returns a Cannot GET /[object%20Object]
Any insight is greatly greatly appreciated!
Thank you in advance!
Image Tag
<img src={require('./mug1.png').default} className="mugImage" />
CSS
.mugImage {
object-fit: cover;
width: 100%;
height: 100%;
z-index: 10;
}
Webpack
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
mode: "development",
resolve: {
fallback: {
assert: require.resolve('assert'),
crypto: require.resolve('crypto-browserify'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
stream: require.resolve('stream-browserify'),
},
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}, {
test: /\.(jpg|png|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 25000
}
}
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
},
},
],
},
]
},
plugins: [htmlPlugin]
};
You don't need to use both loaders. Both loaders url-loader and file-loader work the same, but the difference is url-loader can be configured with limit to smaller files to be inlined like DataURL.
Like
data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiNDRlYTU1N2FlYmM4ZTM2Y2EyOGQ2N2RlM2YwMWM2MWMucG5nIjs=
Another thing is that file-loader emits assets to the output directory on the build.
If you choose to use url-loader
module.exports = {
...
module: {
rules: [
...
{
test: /\.(jpe?g|png|svg)$/,
use: [{ {
loader: 'url-loader',
options: {
limit: 25000 //asset size limit in byte
name: '[name].[ext]',
outputPath: 'assets/images/'
},
}]
},
]
},
plugins: [...]
};
Assets size lower than configured will be inlined with DataURL no asset will be emitted. Greater will be handled as a separate file. for
file-loadertry
module.exports = {
...
module: {
rules: [
...
{
test: /\.(jpe?g|png|svg)$/,
use: [{ {
loader: 'file-loader'
}]
},
]
},
plugins: [...]
};
esMoulde: false. Remove from your code.