Pixi.js: تحميل أصول الصور لـ PIXI.js بالتزامن مع Webpack

أحاول تحميل أصول الصور لـ PIXI.js في مشروع بي والذي يستخدم Webpack. ها هي فئة مكونات "القائمة" الخاصة بي بالكامل:

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;

الآن كما ترى ، أحاول تحميل الصورة background.jpg في PIXI باستخدام الوظيفة loader.add() . إنه فقط لا يعمل. أستطيع أن أرى في سجلات وحدة التحكم الخاصة بي التصحيح أن ارتفاع الصورة وعرضها هو 1. أيضًا ، عند عرض عنوان URL الخاص بصورة الخلفية ، يبدو كل شيء جيدًا. أي نصائح؟