Sprite will not render - have no idea why

[cnwerb]

I'm building an angular web app with an embedded pixi component. I'm trying to render a cat image to my pixi stage but for some reason it will simply not render.

Here is the code that I use to create the stage and try to render the cat:

generatePixiCanvas() {
        
        this.renderer = PIXI.autoDetectRenderer(this.getParentDivWidth(), this.getParentDivHeight());
        document.getElementById('pixi-canvas-container').appendChild(this.renderer.view);
        this.stage = new PIXI.Container();
        this.generatePixiTextObject();

        
        var sprite = PIXI.Sprite.fromImage("/assets/cat.png");
        sprite.position.set(100, 100);
        sprite.interactive = true;
        sprite.width = 100;
        console.log("test:" + sprite.visible + sprite.width);

        this.stage.addChild(sprite);

        this.render();
}

When the page loads, I get the string "test:true100" logged to the console, which must mean that the sprite is successfully created and it's width is large enough to be see, but for some reason, it simply does not appear! I have absolutely no idea why this could be happening, because text objects are rendered fine.

I've attached an image of my folder structure, the above code is located in the pixi-component folder.

Please help

[alex_h]

Have you checked with dev tools network panel to see that the cat png really is being loaded? Not sure you want the slash before the folder name 'assets' in your file path.

Try var sprite = PIXI.Sprite.fromImage("assets/cat.png");

[xdiepx]

You need to change "this.render()" to "this.renderer.render(this.stage);" and it should render everything for you.