Reactjs 如何在@ion phaser/react npm包中加载图像 /** *@flow */ 从“React”导入React，{Component} 从“移相器”导入移相器 从'@ion phaser/react'导入{IonPhaser} 从“./assets/logo.png”导入徽标 从“./assets/sky.png”导入天空 从“./assets/star.png”导入星号 从“./assets/platform.png”导入platformPic 从“./assets/dude.png”导入dude 从“./assets/bomb.png”导入炸弹 导入“./App.css” 类应用程序扩展组件{ 状态={ 未安装：错误， 初始化：false， 游戏：{ 宽度：“800”， 高度：“600”， 类型：Phaser.AUTO， 物理学：{ 默认值：“arcade”， 拱廊：{ 重力：{y:200}， 调试：false }, }, 场景：{ init:function（）{ //this.camers.main.setBackgroundColor（“#24252A”） }, 预加载：函数（）{ this.load.image（'sky'，'/assets/sky.png'）； }, 创建：函数（）{ 让平台； 这个.add.image（400300，'sky'）.setOrigin（0.5）； }, 更新：函数（）{ }, } }, } 初始化名称=（）=>{ this.setState（{initialize:true}） } render（）{ const{initialize，game，unmounted}=this.state 返回( {！初始化&& } {！已卸载&& } ); } } 导出默认应用程序；

我确实得到了另一个使用phaser的例子，例如离子phasers react example github页面上使用react和electron的例子。我认为它在electron中比在浏览器中工作得更快

上面的代码图像上传不起作用，它显示了绿色框，其中有一个对角线，而不是图片。尝试完成phaser 3网页上的初学者教程，将其转换为react中的离子phaser。请帮忙

/**
 * @flow
 */

import React, { Component } from 'react'
import Phaser from 'phaser'
import { IonPhaser } from '@ion-phaser/react'
import logo from './assets/logo.png'
import sky from './assets/sky.png'
import star from './assets/star.png'
import platformPic from './assets/platform.png'
import dude from './assets/dude.png'
import bomb from './assets/bomb.png'

import './App.css'


class App extends Component {

state = {
    unmounted: false,
    initialize: false,
    game: {
        width: "800",
        height: "600",
        type: Phaser.AUTO,
        physics:{
            default: 'arcade', 
            arcade: {
                gravity: {y: 200}, 
                debug: false
            }, 
        }, 
        scene: {
        init: function() {
            // this.cameras.main.setBackgroundColor('#24252A')
        },
          preload: function() {
            this.load.image('sky', '/assets/sky.png');

          },
          create: function() { 
              let platforms;
              this.add.image(400, 300, 'sky').setOrigin(0.5);
          },
          update: function(){

          },
        }
    },
}


initializeGame = () => {
  this.setState({ initialize: true })
}



render() {
const { initialize, game, unmounted } = this.state
return (
    <div>

       { !initialize &&
        <React.Fragment>
          <img src={logo} className="App-logo" alt="logo" />
          <div onClick={this.initializeGame} className="flex">
            <a href="#1" className="bttn">Initialize</a>
          </div>
        </React.Fragment>
      }
      { !unmounted && <IonPhaser game={game} initialize={initialize} /> 
}


    </div>
);
}
}
export default App;