如何在ReactJS项目中加载使用Phaser 3制作的游戏资源？

问题描述

我有一个网站项目，它是带有 ReactJS 的SPA，在其中使用 Phaser 3 制作游戏。实际上，我正在迁移以前在Angular Framework中的项目。我面临的问题是，当尝试在预加载功能中加载游戏的图像时，我无法访问存储游戏图像的路径。这样做并没有给我Angular带来麻烦。

我不知道ReactJS使用其组件的方式以及如何加载React图像是否有问题。

游戏本身不是 React 组件，它只是我在该组件中导出的一个单独模块，将呈现游戏视图。

在Angular项目中，我做到了：

1. 是渲染游戏的组件
2. 是否已加载图像中的场景
3. 是用于加载图片的代码
4. 图像的存储位置

它正常工作！但使用Angular。

另一方面，使用 ReactJS 时，我无法从reactJS项目的资产文件夹中加载相同游戏的相同图像。

1. 是渲染游戏的 react 组件
2. 在此处配置其他JS文件中的游戏（不是React组件）
3. 游戏在哪里呈现
4. 是否已加载图像中的场景
5. 图像的存储位置

结果：

我必须说我已经尝试了几条路线，但都没有成功。

preload() {
   this.load.image('background','assets/games/blaster-x/images/background.png');       
}

preload() {
   this.load.image('background','../../assets/games/blaster-x/images/background.png');       
}

有人遇到过类似的问题吗？

解决方法

React对资产的文件加载器使用不同的样式。

import backgroundImage from ‘src/assets/games/images/background.png’;

...

this.load.image(‘background’,backgroundImage);

,

我一直在研究，事实是ReactJS JXS使用另一种方式将其图像导入其组件。

import image1 from './images/image1.jpg';
<img src={image1} />

或

<img src={ require('./images/image1.jpg') } />

对于我使用Phaser 3制作的游戏来访问场景中的资源的情况，只有当我将所有资产都移到ReactJS项目的公共文件夹中时，它才起作用。

更多信息在这里：

https://phaser.discourse.group/t/this-load-image-file-path-not-working/1566/11

,

就我而言，这是我没有注意到的 package.json 配置（public 是放置文件的文件夹）

"staticFiles": {
        "staticPath": "public","watcherGlob": "**"
    }