issues with loading and rendering images

[JinZSu]

Hello,

I have reasons to believe that image.load doesn't actually work.

I have made a testing script and have pasted it below. The ion-Phaser will not render the photo correctly, but instead give a black and green default.

The files are like this: -React-app --node_modules/ --Public/ --src/ ---App.tsx ---Gamescreen.tsx ---assets/ ----logo.png

I have tried multiple variations such as: ./assets/logo.png logo.png (moved the image to the same folder as app.tsx) public/assets/logo.png (moved the image and folder into public)

It just doesn't want to render

import React, { useState, useEffect } from 'react'

import Phaser from 'phaser'
import { IonPhaser, GameInstance } from '@ion-phaser/react'

const gameConfig = {
  type: Phaser.AUTO,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 },
      debug: false
    }
  },
  scene: {
    init () {
    this.cameras.main.backgroundColor.setTo(0,255,255);
    this.load.image("bg", './assets/logo.png');
  },

  create () {
    this.add.image(30,30,"bg");
  }
  }
};

export default class Gamescreen extends React.Component {

  constructor(props){
    super(props)
  }

  render() {
    return (
      <IonPhaser game={gameConfig} initialize={this.props} />

    );
  }
}

[gilbertoalmeida]

Hi, I think you have to load the image inside the preload function and not in init. And the file needs to be inside the public folder.

[JinZSu]

I have fixed the issue! Thank you!

The problem is that the path directory for ion-phaser begins in public so all I had to do was 'assets/logo.png'