React & Webpack: Laden und Anzeigen von Bildern als Hintergrundbild

Question

Ich erstelle eine bannerähnliche Komponente mit einem Bild, das als Hintergrund einer Komponente eingestellt ist, aber ich kann es nicht zum Laufen bringen. Ich habe verschiedene Online-Vorschläge ausprobiert, die kein Glück bringen. Im Moment bin ich mir nicht sicher, ob mein Fehler innerhalb des Reaction-Codes liegt oder ob das Webpack die Dateien nicht korrekt lädt.

Hier ist meine Dateistruktur:

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

Hier ist meine webpack Konfiguration:

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

    ] 
    } 
}; 

Und hier ist, wie ich es in der App bin mit:

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

Ist hier resultierende html :

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

aber kein Bild wird angezeigt. Auch das Öffnen des Image src-Links zeigt nur einen leeren Bildschirm. Warum? Und wie kann ich es reparieren?

Answer 1

Sie sollten eine Var übergeben, die das Ergebnis der Anforderung des Bildes ist, wenn Sie es mit Webpack benötigen, wird es ein Base64-Inline-Bild, nicht einen relativen Pfad generieren.

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

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