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;
}

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

1 个答案: