How to solve the problem with paths for images?

Question

webpack

There is such a structure
-dist
--img
--css
--js
--fonts
-src
--img
--scss
--js
--fonts
When I write the path to the background image in the scss file: url('../img/arrowDown .png'), then background: url('/img/arrowDown.png') appears in the css bundle, and because of this, it is impossible to insert an image
Webpack config:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const PATHS = {
src: path.join(__dirname, 'src'),
build: path.join(__dirname, 'dist')
};
module.exports = {
entry: [
'./src/js/index.js',
'./src/scss/style.scss'
],
output: {
path: PATHS.build,
filename: './js/bundle .js',
publicPath: '/'
},
devtool: "source-map",
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src/js'),
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env']
}
}
},
test: /\.(sass|scss)$/,
include: path.resolve(__dirname, 'src/scss'),
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: " css-loader",
options: {
sourceMap: true,
url: false,
}
},
{
loader: "sass-loader",
options: {
sourceMap: true,
}
}
]
})
},
{
test: /\.(png |jpg|gif)$/,
use: [
{ loader: 'file-loader',
options: {
outputPath: './img/',
name: '[name].[ext]'
}
}
]
},
{
test: /\.ttf$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: './fonts'
}
}
]
}
]
},
plugins : [
new ExtractTextPlugin({
filename: './css/style.bundle.css',
allChunks: true,
}),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
]
};

Answer 1

It is possible to try to transfer through const, it works.
something like that:

const imgUrl = "ваш путь к картинке";
    const divStyle = {
        backgroundImage: "url(" + imgUrl + ")",
    };

and then write in style
<div className="sel-card" style={divStyle}>