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 

Button.jsx：

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

Button.scss：

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

私はWebブラウザから画像にアクセスできます：http://localhost:8080/images/image.png、しかし、私はなぜ私のCSSが理解できないのですか...

ご存じですか？

ありがとうございます！

更新

インスペクターのスタイル：

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

Answer 1

あなたが提供する必要があるURLは、あなたのファイルへの相対であるので../../../images/image.png