Images are not showing after deploying three js app using vite framework

[its-shubham2323]

After loading site locally images are showing properly

and here is how the site look after deploying

Shubham Pitekar Portfolio

here is the Github repo for the code:- GitHub - shuence/Shuence_Portfolio: Personal Portfolio Website using threejs

[coelmay]

Hi @its-shubham2323

You need to move the img directory into the public directory.

[its-shubham2323]

That don’t worked out.

[coelmay]

It worked for me.

I can see in your repository that you did not move the img directory into public.

Here is my clone of your git repository: coelmay/ShuenceSite [deleted]
And here is the deployed I made: 6140463d69e6835cd1623afc–agitated-kowalevski-2cc360.netlify.app [deleted]

[Darkskittlz]

Hi @coelmay I’m also having trouble deploying my site through Netlify. Here’s my repo.

GitHub - Darkskittlz/ThreeJS-Portfolio: Portfolio website utilizing threejs...

Are you saying I should create a public/img folder for all of my assets before running npm run build?

[coelmay]

Hi @Darkskittlz

@Darkskittlz

Are you saying I should create a public/img folder for all of my assets before running npm run build?

In your case, no.

The images are not referenced as img/FILENAME, rather simply as FILENAME. So rather than put the images in public/img, put then into public. The reason for needing to move the files into public (and the reason they are not bundled otherwise) is the images are not referenced in HTML (i.e. <img src="sun.jpg">) rather in JavaScript.

[Darkskittlz]

Thanks for your response. I’ve put the images in public and referenced them in my main.js but my netlify deploy is still not rendering the img files

https://threejs-portfolio-site.netlify.app/

[coelmay]

@Darkskittlz

public and referenced them in my main.js

I didn’t mean change the path in main.js.

You need to remove the ./public/ path from main.js and it will work.

[Darkskittlz]

Thank you sooooooo much @coelmay! That did work perfectly. I appreciate your help.

[codewithnafiz]

@coelmay I am also facing the same issues. Here is my Repo. GitHub - codewithnafiz/class-portfolio
and the link to the app
https://ccsc9neptune.netlify.app/
Please look into my repo and see what is my issue

[hillary]

Hey there, @codewithnafiz

I believe the issue you are encountering is slightly different. When I follow the URL to your site, I hit a 404. I took a look at your repository, and it looks like your index.html is in the wrong spot. Please give this guide a read and see if it addresses your obstacles:

[Support Guide] I’ve deployed my site but I still see "Page not found”

Last reviewed by Netlify Support - August, 2023 Netlify attempts to lookup a file based on several xor filters, and when all of these fail, we end up serving a 404 page. For example, a request made to /example/ would check /example/index.html, /example.html, /example/home.html and several other combinations (not necessarily in the same order) before hitting the 404. However, in case you were not expecting a 404 at a particular URL, you might be interested in finding out the reason and potentia…

[coelmay]

As @hillary mentioned, the issue you have is different to that of the OP. The support guide provided is the best starting point to resolve your issue @codewithnafiz .

[codewithnafiz]

I mean where should i put my index.html then?

[coelmay]

What are your current build settings @codewithnafiz?

[its-shubham2323]

Import three js modules through CDN Instead of Npm or Yarn It will work :!

[codewithnafiz]

i am new to programming and i dont know many things. can you do it for me? please

[coelmay]

Hey @codewithnafiz

I can’t do this for you, but I can tell you how to fix it.

Inside client, you need to create another directory public and move the .jpg, and .jpeg files into it. This is because these files are not referenced in the index.html but in main.js so Vite does not copy them. public is the directory to use for assets you want copied during build (see Vite documentation.)

For Netlify build settings, you need to set client as the base directory and the publish directory to client/dist (client is automatically pre-pended to the publish directory when it is set as the base directory.) Then set the *build command to npm run build, and all is set.

You can remove the node_modules directory as this is not required. Netlify installs these modules during build.

If you have further issues, do respond here.

Suggested build settings for your project:

[Tathagata_Mishra]

Thanks for solving the issue ,
I was also having same issue.
Thanks
My git repo: GitHub - tathagatamishra/3D at PLANET

Netlify link: https://p-l-a-n-e-t.netlify.app/

[naymur]

I’ve the same problem, my three.js model is not loading, it’s always give me all these error

Error: THREE.GLTFLoader: Failed to load buffer “scene.bin”.
loadBuffer https://timely-sunflower-f7fb45.netlify.app/assets/index-aca35cc6.js:3416
load https://timely-sunflower-f7fb45.netlify.app/assets/index-aca35cc6.js:3416
THREE.GLTFLoader: Couldn’t load texture textures/M_Monitor_normal.png index-bfd69eb1.js:3416:169931

THREE.GLTFLoader: Couldn’t load texture textures/M_Speakers_baseColor.png index-bfd69eb1.js:3416:169931

THREE.GLTFLoader: Couldn’t load texture textures/M_Details_normal.png

but it’s perfectly load, I mean my model perfectly load on my localhost, but when I upload my dist file my scene.gltf and textures are not load properly and also if you stay maybe 3-5 minutes on my site then you’ll see the model. is anyone here can help me out to fix this problem

this is my github link:GitHub - NAYMUR143/three.js
this is my project link: https://timely-sunflower-f7fb45.netlify.app/

[SamO]

Hi @naymur Sounds like you might have a path issue. Can you double check that the file path matches what is being uploaded to the server? Also what does your console say? Could you share that please?

Thanks!