Question

我是新来的反应者，我正在尝试在React中设置背景图像。但是，我在webpack中遇到错误：

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss
Module not found: Error: Can't resolve '../../images/simon-rae-732820-unsplash.jpg' in 'D:\TravelPlannr\src\styles'
 @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss 7:735-788
 @ ./src/styles/styles.scss
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8585 ./src/app.js

以下是Webpack的配置文件：

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        }, {
            test: /\.s?css/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        },
        {
            test: /\.(png|jp(e*)g|svg)$/,  
            use: [{
                loader: 'file-loader',
                options: {
                    name: 'images/[hash]-[name].[ext]'
                } 
            }]
        }
    ]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 8585,
        historyApiFallback: true
    }
};

以下是相同的scss：

.header-container{
    height: 85%;
    background-image: url('../../images/simon-rae-732820-unsplash.jpg')
}

我花了数小时寻找解决方案，但没有任何效果。

请帮助。预先感谢！

无法在React中加载背景图片

0 个答案: