Javascript 网页包2背景图像相对路径不工作

当我在react组件中使用相对路径指定一个图像时，它可以正常加载

组成部分：

import myImg from '../img/myImg.jpg';
...
<img className="myImg" src={myImg} alt="amazing image" />

这导致路径为

http://localhost:8080/css/src/img/myImg.jpg

这是不正确的。如果我使用绝对url，它会工作

背景图像：url（'http://localhost:8080/src/img/challenge.jpg');

网页包配置：

...
        {
            test: /\.less$/,
            include: [
                path.resolve(__dirname, 'src/less')
            ],
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    },
                    'less-loader'
                ]
            })
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            include: [
                path.resolve(__dirname, 'src/img')
            ],
            use: 'file-loader?name=[path][name].[ext]'
        }
    ]
},
plugins: [  // https://webpack.js.org/configuration/plugins/
    new ExtractTextPlugin('css/' + pkg.name + '.' + pkg.version + '.css'),
    new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/template.js')})//,
]
...

如何在css中使用相对路径？
看起来您只需要在css的相对路径中使用另一个“../”即可

#mainContainer {
    background-image: url('../../img/challenge.jpg');
    background-size: cover;
    background-position: center;
}

是的，我认为这可能是问题所在，但当我更改它时，我得到了：模块构建失败：ModuleNotFoundError：找不到模块：错误：无法解决“../../img/myImg.jpg”in“/Users/chaselester/code/git/blife/src/less”中的“../../img/jpg”，因为它在您的风格中根本不存在。也许试试../src/img/challange.jpg？不行。当我制作背景图像时，我对它试图解析的路径感到有点困惑：…css/src/img。。。但是当使用标记时，解析的路径是…/src/img/。。。之前没有添加任何js，就像之前添加css一样，看起来它与这个
test://\（jpe？g | png | gif | svg）$/i有关，包括：[path.resolve（u dirname，'src/img'）]，在配置中使用：'file loader？name=[path][name].[ext ext'
。
#mainContainer {
    background-image: url('../../img/challenge.jpg');
    background-size: cover;
    background-position: center;
}