0

After searching for a bit and finding others having somewhat of the same problem, but no solution for me, I figured it was my turn to seek help.

I have npm along with parceljs setup for webserving (I'm new to these but I'm quite confident it's working as you can see some output in the image I've posted)

I have the typical problem of images not displaying. Code and Dev stats

Status code of the image is returning 304 OK, and is it normal to not see the the image listed in the directory under the 'Sources' tab in Developer tools?...

Image not listed in treeview

winner_joiner
  • 12,173
  • 4
  • 36
  • 61
ZPaul2Fresh8
  • 1

2 Answers2

1

The issue is with the way you are loading the image urls as hard-coded strings, for example, you wrote this:

this.load.image('sz','./src/assets/gfx/sz0001.png`)

The way this is written, parcel doesn't know that this string is actually a reference to an image file, so it doesn't know to copy over the image into your output folder and ensure that the path ends up matching the actual output location.

The way parcel works, if you want to include an asset (like an image) into your bundle and reference it by URL in some other javascript context (like the this.load.image function), you should use an import statement or a URL constructor (see docs).

So you would instead write:

import myImageUrl from './src/assets/gfx/sz0001.png`;
// 'myImageUrl' will be a string that points to the location of the image
// This will also tell parcel that sz0001.png is a dependency of this project
// so that it can take care of copying it over to the dist output.
this.load.image('sz',myImageUrl)

Another tip is that the template you referenced uses parcel-bundler which the old, unmaintained 1.x version of parcel. I'd recommend upgrading your project to parcel 2, which on npm is simply parcel (see migration guide).

Andrew Stegmaier
  • 3,429
  • 2
  • 14
  • 26
  • Thank you! Adding import for all external resources fixed it. I was surprised that there is no console warning or error to indicate loading failures. – Pete Baron Jan 06 '23 at 02:04
0

The green box, is shown if the asset is not found, or some other error.

Since I'm not 100% sure how parcel works and I don't know your parcel configuration and which parcel plugins you are using (I'm assuming parcel can be configured).

You could solve the problem by: manually copying the assets folder from src/ to dist/, than it should work. (atleast this work for me, when using this parcel template, to test the issue)

Maybe a parcel - plugin like parcel-plugin-static-files-copy, could also solve the problem, and/or be useful to keep the static files up-to-date.

winner_joiner
  • 12,173
  • 4
  • 36
  • 61
  • Thank you, I did this yesterday and it worked. This is my first time working with this so was a curve ball for me. I only wonder is this solution is a band-aid until deployment time? I'll have to read up more on Parcel for now. Thank you. – ZPaul2Fresh8 Feb 27 '22 at 12:16
  • @ZPaul2Fresh8 the solutio is a band-aid. the reall solution is to configer a plugin as mentioned in my answer, or writing a `npm script` that automatically copies the file on every build or so. The latter would be a bigger _(but automated)_ band-aid. ;-) – winner_joiner Feb 27 '22 at 14:22
  • @ZPaul2Fresh8 btw.: if you have to read up on **parcel**, I would recommend reading up on **webpack** and switching to a _phaser webpack template_ like this one https://github.com/photonstorm/phaser3-project-template . webpack is like parcel, but with more features, more plugins, more users, more ... _(and this template is configure to work out-of-the-box without band aids)_ – winner_joiner Feb 28 '22 at 05:37