Background and Moon not appearing in website

Hi this is my first website that I have ever built. I 3D rendered my moon. However my Moon.jpg and space.jpg is not appearing on my website. space.jpg is my background image. Here is my .github file. Please help.

@1137amartinez Please provide the URL to your Netlify site.

I understand this is your first website, but I’m sorry to say, this is not how a website is typically built. I’d advise you to go over the Vite documentation: Getting Started | Vite (vitejs.dev) before proceeding further.

You’ve currently uploaded files to your repo in a way that doesn’t make sense and I’m not even sure how your website is being built.

If someone is keen to help @1137amartinez fix it all, the website URL is: OC Strikers FC (oc-strikers-fc.netlify.app)

The site is built strangely, but the output seems to work, so ignoring that…

The ultimate issue is that the images aren’t found:

image

You’ll be getting confused because some images are showing, for example:

There’s an important difference though.

That image is referenced directly in the index.html as:

Vite sees the reference, processes it and outputs it to:
https://oc-strikers-fc.netlify.app/assets/StrikersFCTEAM-DsTuHKkZ.jpg

Your Moon.jpg image for example is referenced only here:

Vite won’t be seeing that and hence the image is never even placed into your build output.

You can confirm this by running your build locally, then looking at the files in your Publish directory.

The way to fix it is to ensure that the file is output, so that it can be loaded at runtime by three.js

Take a look at the Vite Static Asset Handling Documentation
In particular the section regarding The public Directory

1 Like