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