title: How can I load the resources of my game made with Phaser 3 that is inside a project with ReactJS?
body: <p>I have a project of a website, it is a SPA with <strong>ReactJS</strong>, in which I am using <strong>Phaser 3</strong> to make my game. Actually I am migrating the project that previously was in Angular Framework. The problem I am facing is that when trying to load the images of my game in the preload <strong>function</strong>, I cannot access the path where the images of the Game are stored. Doing this did not give me problems with Angular.</p>
  <p>I don't know if this is a problem with the way ReactJS uses its components and how it loads React images.</p>
  <p>The Game itself is not a <strong>React</strong> Component, it is only a separate module I export within the component that will render the game view.</p>
  <p>In the Angular project I did This:</p>
  <p><a href="https://i.stack.imgur.com/iQARL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iQARL.png" alt="enter image description here" /></a></p>
  <ol>
  <li>Is the component where the game is rendered</li>
  <li>Is the scene from the image is loaded</li>
  <li>Is the code for load the image</li>
  <li>Is where the image is stored</li>
  </ol>
  <p>It works correctly! but using Angular.</p>
  <p>In the other hand using <strong>ReactJS</strong> I'm getting problems loading the same images of the same game from the assets folder of the reactJS project.</p>
  <p><a href="https://i.stack.imgur.com/tSmvn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tSmvn.png" alt="enter image description here" /></a></p>
  <ol>
  <li>Is the <strong>react</strong> component where the game is rendered</li>
  <li>Is where I configure the game that is in other JS file (Is not a react component)</li>
  <li>Is Where Game is rendered</li>
  <li>Is the scene from the image is loaded</li>
  <li>Is where the image is stored</li>
  </ol>
  <p>Result:</p>
  <p><a href="https://i.stack.imgur.com/N3jFi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N3jFi.png" alt="enter image description here" /></a></p>
  <p>I must say that I have tried several routes without success.</p>
  <p><a href="https://i.stack.imgur.com/3bAWP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3bAWP.png" alt="enter image description here" /></a></p>
  <pre><code>preload() {
     this.load.image('background', 'assets/games/blaster-x/images/background.png');       
  }
  
  preload() {
     this.load.image('background', '../../assets/games/blaster-x/images/background.png');       
  }
  </code></pre>
  <p>Has anyone faced a similar problem?</p>