reactjs - Webpack - 无法解析背景图像的路径

Question

我正在尝试使用react.js 和 redux 开发一个 Web 应用程序，但遇到了一些问题。

我有以下 Webpack 配置:

const path = require('path');

var sassParams = [
    'includePaths[]=' + path.resolve(__dirname, './app/styles'),
    'includePaths[]=' + path.resolve(__dirname, '../node_modules')
];

module.exports = {
    devtool: 'inline-source-map',
    entry: {
        javascript: "./app/src/index.jsx",
        html: "./app/index.html",
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'app')
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.json'],
        root: path.resolve(__dirname, './app/src'),
        alias: {
            images: path.resolve(__dirname, './app/images')
        }
    },
    devServer:{
        contentBase: 'app'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ["babel-loader"],
        }, {
            test: /\.html$/,
            loader: "file?name=[name].[ext]",
        }, {
            test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
            loader: 'url-loader?limit=10000&name=images/[name].[ext]'
        }, {
            test: /\.scss$/,
            loader: [
                'style-loader',
                'css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]',
                'resolve-url',
                'postcss-loader',
                'sass-loader?' + sassParams.join('&')
            ].join('!'),
        }],
        postcss() {
            return [autoprefixer, precss];
        },
    },
};

这是我的文件夹架构:

├── app
│   ├── images
│   │   └── image.png
│   ├── index.html
│   ├── src
│   │   ├── actions
│   │   ├── components
│   │   │   └── Button
│   │   │   │   ├── Button.jsx
│   │   │   │   └── Button.scss
│   │   ├── constants
│   │   ├── containers
│   │   ├── index.jsx
│   │   ├── middleware
│   │   ├── reducers
│   │   └── store
│   └── styles
│       ├── _base.scss
│       ├── _functions.scss
│       ├── _mixins.scss
│       ├── _toolkit.scss
│       ├── _variables.scss
│       └── app.scss
├── node_modules
├── package.json
└── webpack.config.js

按钮.jsx:

return (
    <button className={style.btn} >
        { children }
    </button>
);

按钮.scss:

.btn {
    background-image: url(/images/image.png);
}

我可以从我的网络浏览器访问该图像:http://localhost:8080/images/image.png ，但是，我不明白为什么我的 css 不...

有什么想法吗？

谢谢!

更新

检查器中的样式:

.Button__btn___1lpoP {
    background-image: url(/images/image.png);
}

Answer 1

您需要提供的 URL 与您的文件相关，因此请将其更改为 ../../../images/image.png