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

【问题标题】：how to load an image in @ion-phaser/react npm package如何在@ion-phaser/react npm 包中加载图像
【发布时间】：2020-06-16 11:55:18
【问题描述】：

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

我确实得到了另一个使用移相器的示例，该示例为离子移相器上的示例使用 react 和电子反应示例 github 页面。我认为它在电子中比在浏览器中运行得更快。

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

【问题讨论】：

标签： reactjs electron phaser-framework

【解决方案1】：

您的代码显示：

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

      },

应该说

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

      },

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

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

您做错了什么是您已经以“sky”名称导入了图像，但您尝试通过其完整路径加载图像。

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

【讨论】：