Pixi.js: Load image assets for PIXI.js in conjunction with Webpack

[deangibson89]

I'm trying to load image assets for PIXI.js in a React project of mine that uses Webpack. Here is my whole 'Menu' component class:

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;

Now as you can see, I'm trying to load the image background.jpg into PIXI with the loader.add() function. It just doesn't work. In my debug console logs I can see that the height and width of the image is 1. Also, when I view the URL for the background image, it all seems fine. Any tips?

[staff0rd]

Try switching it to this;
~
.load(() => this.init());
~

[deangibson89]

@staff0rd that works great! But.. why??

[staff0rd]

load expects a function as its parameter, however you were actually calling init() thereby passing the result of it (void) to load. If init didn't have references to this inside it, you could use the following to pass the function;
~
.load(this.init);
~

Notice the lack of parentheses.

[hayesmaker]

this is obsolete now... and we need a way to load any asset which we're bundling with webpack

[nitwhiz]

@hayesmaker it works but the texture is empty for a while. when it's ready it gets blitted correctly.

[pajtai]

@nitwhiz is that why I initially get a 1px width for all sprites?
is there a way to get a callback to fire once a sprite is loaded?