# Images Not Rendering, Even With Relative Path Provided

**URL:** <https://phaser.discourse.group/t/images-not-rendering-even-with-relative-path-provided/13616>\
**Category:** Phaser 3\
**Created:** [October 3, 2023, 6:23pm UTC](https://phaser.discourse.group/t/images-not-rendering-even-with-relative-path-provided/13616 "2023-10-03T18:23:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![UnalteredPlatypus](https://avatars.discourse-cdn.com/v4/letter/u/9f8e36/32.png) [@UnalteredPlatypus](https://phaser.discourse.group/u/UnalteredPlatypus)\
**Post date:** [October 3, 2023, 6:23pm UTC](https://phaser.discourse.group/t/images-not-rendering-even-with-relative-path-provided/13616/1 "2023-10-03T18:23:52Z")

</div>

![2023-10-01-frog](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/b57c2a34368d58932db9a4d8b573225cc81ff054.png)

I’m new to Phaser (and bundlers like Parcel) and have worked through some of the code examples online. Many great code samples are available on [codesandbox.io](http://codesandbox.io), though I’ve found that often the samples don’t run well when I download the source and try running locally.

Here is one example: [[frog adventure template]](https://codesandbox.io/s/frog-adventure-template-t9lxi?file=/src/main.js). The sandbox specifies the environment as “Parcel”. After downloading the source I’m able to launch on my own machine by running the following commands from the base directory (frog-adventure-template):

```javascript
npm install
npm run start

```

The sample launches in my browser, but the images are not rendered as seen in the screenshot above.  
The preload() method from Game.js attempts to load the images as follows:

```javascript
this.load.image("background", "assets/background.png");
this.load.image("platform", "assets/platform.png");
this.load.image("rock", "assets/rock.png");

```

I’ve tried modifying the path to be a relative path from the base directory (‘./assets/background.png’) and alternatively a relative path from Game.js (./…/…/assets/background.png), though both to no avail. Any thoughts on what the issue may be? 🙂

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 3, 2023, 6:43pm UTC](https://phaser.discourse.group/t/images-not-rendering-even-with-relative-path-provided/13616/2 "2023-10-03T18:43:15Z")

</div>

👋

See [https://github.com/samme/phaser-parcel/blob/master/README.md#game-assets](https://github.com/samme/phaser-parcel/blob/master/README.md#game-assets)

---

<div class="post-metadata">

**Author:** ![UnalteredPlatypus](https://avatars.discourse-cdn.com/v4/letter/u/9f8e36/32.png) [@UnalteredPlatypus](https://phaser.discourse.group/u/UnalteredPlatypus)\
**Post date:** [October 4, 2023, 2:48am UTC](https://phaser.discourse.group/t/images-not-rendering-even-with-relative-path-provided/13616/3 "2023-10-04T02:48:10Z")

</div>

![2023-10-03 19-35-30 frog-fixed](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/a/af3e1bbb59f9667d7ea85f8f05cd1f60f00586a9.png)

I added the assets as imports, as suggested by the phaser-parcel readme (to the top of Game.js) as indicated below. Note that the this.load.image() statements had to be modified accordingly.

```javascript
import background from './../../assets/background.png';
import platform from './../../assets/platform.png';
import rock from './../../assets/rock.png';
import spike from './../../assets/Spiked Ball.png';
import saw from './../../assets/Off.png';
import carot from './../../assets/Carot.png';
import smallPlatform from './../../assets/small platform.png';
import player from './../../assets/player.png';

```

Images are now rendering! It’s a little annoying that this wouldn’t work as-is since it runs fine on codesandbox, but I’m happy its working now and that I know how to fix this issue going forward.Thanks @samme!