Webpack 2背景图像相对路径不起作用

Question

当我使用相对路径在我的反应组件中指定图像时，它加载得很好

组件：

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

这很好用。在检查时它给出的路径为http://localhost:8080/src/img/myImg.jpg

但是，如果我尝试将图像用作背景图像，则路径不正确，我得到 404

CSS：

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

这导致路径为http://localhost:8080/css/src/img/myImg.jpg，这是不正确的。如果我使用绝对网址，它可以工作background-image: url('http://localhost:8080/src/img/challenge.jpg');

Webpack 配置：

...
        {
            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 中使用相对路径？

Answer 1

看起来您只需要在您的 css 的相对路径中添加一个“../”。

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