React＆Webpack：加載並顯示圖像作爲背景圖像

Question

我創建了一個帶有圖像設置作爲組件背景的橫幅狀組件，但是我無法使其運行。我嘗試了在線發佈的不同建議，但沒有運氣，目前我不確定我的錯誤是否在反應代碼中，或者是沒有正確加載文件的webpack。

這是我的文件結構：

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, 
}