React＆Webpack：画像を背景画像として読み込んで表示する

Question

画像をコンポーネントの背景として設定したバナーのようなコンポーネントを作成していますが、動作させることができません。私は別の提案をオンラインで不運に掲載しようとしましたが、現時点で私のミスが反応コード内にあるのか、ファイルを正しくロードしないのかどうかはわかりません。ここで

は、私のファイル構造です：

AppFolder 
- client/ 
-- components/ 
-- data/ 
-- images/ 
----- banners/ 
------- frontPageBanner2.png 
    ------- 
-- styles/ 
-- myApp.js 
-- store.js 
    --------- 
- index.html 
- package.json 
- webpack.config.dev.js 

は、ここに私のWebPACKの構成です：

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './client/myApp' 
    ], 
    output: { 
path: path.join(__dirname, 'dist'), 
filename: 'bundle.js', 
publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
    // js 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ['babel'], 
     presets: ['es2015', 'react'], 
     include: path.join(__dirname, 'client') 
    }, 
    // CSS 
    { 
     test: /\.scss$/, 
     include: path.join(__dirname, 'client'), 
     loader: 'style-loader!css-loader!sass-loader' 
    }, 

    // PNG 
    { 
     test: /\.(jpg|png)$/, 
     loader: "url-loader?limit=25000", 
     //loader: 'file?name=[path][name].[ext]', 
     include: path.join(__dirname, 'client') 
    }, 

    // FontAwesome 
    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     exclude: path.join(__dirname, 'client/images'), 
     loader: "file-loader" }, 

    // other SVG 
    { test: /\.svg$/, 
     loader: 'url-loader', 
     query: { mimetype: "image/svg+xml" }, 
     include: path.join(__dirname, 'client/images') 
    }, 

    ] 
    } 
}; 

そして、ここでは、私はアプリでそれを使用している方法は次のとおりです。ここで

export class Banner extends React.Component { 
    render() { 
     console.log(this.props.banners); 
     // = '../images/banners/frontPageBanner.png' 
     const bannerImg = this.props.image.backgroundImage; 

     var bannerStyle = { 
      background: 'url(' + bannerImg + ')', 
      backgroundSize: this.props.image.backgroundSize, 
      backgroundPosition: this.props.image.backgroundPosition, 
     } 

     return (
      <section key={this.props.key} className="container hero" style={bannerStyle}> 
       <div className="textbox"> 
        <h2>{this.props.title}</h2> 
       </div> 
      </section> 
     ) 
    } 
} 

は、HTMLの結果です：

<section class="container hero" style="background: url('../images/banners/frontPageBanner2.png') 100% 100%/contain;"> 
    ... 
</section> 

画像は表示されません。また、画像srcリンクを開くと空白の画面しか表示されません。どうして？そして私はそれをどのように修正できますか？

Answer 1

イメージを必要とする結果であるvarを渡す必要があります。webpackを使用する必要がある場合、相対パスではなく、base64インラインイメージが生成されます。

var DuckImage = require('./Duck.jpg'); 

var bannerStyle = { 
    backgroundImage: 'url(' + DuckImage + ')', 
    backgroundSize: this.props.image.backgroundSize, 
    backgroundPosition: this.props.image.backgroundPosition, 
}