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

After loading site locally images are showing properly


and here is how the site look after deploying

here is the Github repo for the code:- GitHub - shuence/Shuence

Hi @its-shubham2323

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

That don’t worked out.

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]

2 Likes

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

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

1 Like

Hi @Darkskittlz

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.

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/

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

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

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

1 Like

@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

Hey there, @codewithnafiz :wave:

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:

1 Like

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 .

1 Like

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

What are your current build settings @codewithnafiz?

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

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

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: