image cannot be loaded

[Now-Sprouting]

When I introduce resources such as pictures, the picture resources cannot be loaded，（use react）

import React, { Component } from "react";
import Phaser from "phaser";
import { IonPhaser } from "@ion-phaser/react";
import bg from "./assets/img/bg.png";

class App extends Component {
  state = {
    initialize: true,
    game: {
      type: Phaser.AUTO,
      parent: "container",
      width: 500,
      height: 880,
      physics: {
        default: "arcade",
      },
      scene: [
        {
          key: "boot",
          preload() {
            this.load.image("bg", "/src/assets/img/bg.png");
            this.load.image("myhand", "../assets/img/myhand.png");
            this.load.image("button2", "../assets/img/button2.png");
            this.load.image("yanggong", "../assets/img/yanggong.png");
            this.load.image("boom", "../assets/img/boom.png");
            this.load.image("jingong", "../assets/img/jingong.png");
            this.load.image("lock", "../assets/img/lock.png");
            this.load.spritesheet("chance", "../assets/img/chance.png", {
              frameWidth: 53,
              frameHeight: 50,
            });
            this.load.spritesheet("hand", "../assets/img/hand.png", {
              frameWidth: 282,
              frameHeight: 800,
            });
            this.load.bitmapFont(
              "number",
              "../assets/img/number.png",
              "../assets/img/number.xml"
            );
            const percentText = this.make
              .text({
                x: 250,
                y: 400,
                text: "0%",
                style: {
                  font: "18px monospace",
                  fill: "#ffffff",
                },
              })
              .setOrigin(0.5, 0.5);
            this.load.on("progress", function (value) {
              percentText.setText(parseInt(value * 100 + "") + "%");
              console.log(percentText);
            });
            this.load.on("complete", function () {
              percentText.destroy();
            });
            // 屏幕适配
            if (!this.game.device.os.desktop) {
              this.scale.scaleMode = Phaser.Scale.FIT;
              this.scale.refresh();
            }
          },
          create() {
            this.scene.start("start");
          },
          update() {},
        },
        {
          key: "start",
          create() {
            this.add.image(300, 570, "boom");
            this.add.image(250, 400, "bg");
            this.physics.add
              .image(this.game.config.width / 2, 780, "myhand")
              .setScale(0.8, 0.8);
          },
        },
      ],
    },
  };

  render() {
    const { initialize, game } = this.state;
    return (
      <div>
        <IonPhaser game={game} initialize={initialize} />
        {/* <img src={bg}></img> */}
      </div>
    );
  }
}

export default App;

Below is the directory structure

Neither path nor absolute path is allowed

[jdnichollsc]

Put your assets in the public folder and try with absolute paths instead 👍

[Now-Sprouting]

Thank you very very very much, you are a great open source author。

[jdnichollsc]

You're welcome mate, any GitHub Star is really appreciated! <3 https://stars.github.com/nominate/