WebpackインラインCSS背景画像

Question

画像を読み込むためにwebpackを取得しようとしていますが、動作させられないようです。私の構成は次のようになります。

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    publicPath: "/build/", 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?/, 
     include: APP_DIR, 
     loader: 'babel' 
     }, 
     { 
     test: /\.scss$/, 
     loaders: ["style", "css", "sass"] 
     }, 
     { 
     test: /\.css$/, 
     loader: 'style-loader!css-loader' 
     }, 
     { 
     test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, 
     loader : 'url-loader' 
     }, 
     { 
     test: /\.(png|jpg|gif)$/, 
     loader: 'file-loader' 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    } 
}; 

そして、私はこのようなインラインCSSの背景画像として使用しようとしています：

<img src="/common/img/split-image/image.jpg"> 

：

<div class="inner-panel" 
    style="background-image: url("/common/img/split-image/image.jpg");"> 
</div> 

また、それは、インラインイメージとしては動作しません。

Answer 1

ウェブパスの設定ではなく、画像のパスに問題があります。あなたがあなたのファイルを見なければならないことをそのように

"./common/img/split-image/image.jpg" 

その他のようなあなたのパスの開始時に./を置く

てみだけでなく必要とし、あなたがそれらを配置したい場所にそれらをそこに置いていることを確認してください。

ファイル・ローダーを（と私はのようによく反応だと思う）を使用しているので、あなたがそれを使用する方法の例は次のようになります。

//CJS 
var file = require("file!./file.png"); 
//ES6 
import file from "file!./file.png"; 

//Later inside a React component 
    const inStyle = { 
     background-image: 'url(' + file + ')' 
    } 
    <div style={inStyle}/> 

（リアクトではなく、スタイル属性の文字列をオブジェクトになります）

url-loaderは同じである必要があります。お役に立てれば。