Pixi.js: Webpack के साथ संयोजन के रूप में PIXI.js के लिए छवि संपत्ति लोड करें

मैं PIXI.js के लिए छवि की संपत्ति को लोड करने की कोशिश कर रहा हूं जो कि

import React from 'react';
import styles from './Menu.css';
import backgroundUrl from './background.jpg';
require('pixi.js')

class Menu extends React.Component {    

    componentDidMount () {

        // Get reference to canvas element
        this.canvas = this.refs.canvas;        

        // Load assets                
        PIXI.loader.add([
            {
                name: 'background',
                url: backgroundUrl
            }
        ]).load(this.init());

    }

    init () {

        // Create background sprite
        const background = new PIXI.Sprite(PIXI.loader.resources.background.texture);

        // DEBUG: Height and width is always '1'
        console.log('Background width: ' + background.width);
        console.log('Background height: ' + background.height);

        // Setup renderer
        this.renderer = PIXI.autoDetectRenderer(background.width, background.height);
        this.renderer.autoResize = true;
        this.renderer.resize(window.innerWidth, window.innerHeight);
        this.canvas.appendChild(this.renderer.view);

        // Create stage
        this.stage = new PIXI.Container();                

        // Add background to stage
        this.stage.addChild(background)

        // Tell the renderer to render the stage
        this.renderer.render(this.stage);

    }

    render () {

        return (
           <div className={styles.canvas} ref='canvas'></div>
        );
    }

}

export default Menu;

अब जैसा कि आप देख सकते हैं, मैं loader.add() फ़ंक्शन के साथ PIXI में background.jpg लोड करने का प्रयास कर रहा हूं। यह सिर्फ काम नहीं करता है। मेरे डिबग कंसोल लॉग में मैं देख सकता हूं कि छवि की ऊंचाई और चौड़ाई 1. है, जब मैं पृष्ठभूमि छवि के लिए URL देखता हूं, तो यह सब ठीक लगता है। कोई सुझाव?