I am facing an issue with loading images in my React application. Some images are set up in the CSS file like this:
background-image: url('/../img/logo.png');
On the other hand, I would like to use images inside React components using the img tag. How can I achieve this?
Below is my webpack configuration:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env) => {
const isProduction = env === 'production';
return {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "styles.css",
})
],
devtool: isProduction ? 'source-map' : 'inline-source-map',
devServer: {
contentBase: path.resolve(__dirname, 'public'),
historyApiFallback: true,
publicPath: '/dist/'
},
performance: {
hints: process.env.NODE_ENV === 'production' ? "warning" : false
},
}
};
The index.html file inside the public folder looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kinnisvara ABC</title>
<link rel="stylesheet" href="/dist/styles.css" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="/dist/bundle.js"></script>
</body>
</html>
The CSS is loading correctly, but the images are not displaying.
Here are screenshots of my file structure:
If anyone could assist me with this issue, I would greatly appreciate it.