reactjs - 如何在@ion-phaser/react npm 包中加载图像

Question

/**
 * @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;

我确实得到了另一个使用相位器的示例，该示例用于 ionic 相位器上的示例 react 示例 github 页面与 react 和 Electron 。我认为它在 electron 中的运行速度比在浏览器中快。

上面的图片上传代码不起作用，它显示带有诊断信息的绿色框而不是图片。尝试完成 Phaser 3 网页上的初学者教程，将其转换为在 React 中与 ion-phaser 一起使用。请帮忙!

Answer 1

你的代码写着:

preload: function() {
        this.load.image('sky', '/assets/sky.png');

      },

应该说

preload: function() {
        this.load.image('sky', sky);

      },

相反，因为您已经在顶部导入了它:

import sky from './assets/sky.png'

你做错的是你已经导入了名为“天空”的图像，但你试图通过它的完整路径加载图像。

这是一个较旧的问题，但我遇到了同样的问题并想通了，所以我想我会回答这个问题:)