Deployment Issue. All images are 404

So i made this website to practice filtering. On uploading the website to vercel/netlify all of my images (which are background-images) are all 404. Weird commit are me trying to debug (very badly ig) Link: https://entertainment-fawn.vercel.app/ Repo: https://github.com/Vasco-Mascarenhas/Entertainment
GitHub
GitHub - Vasco-Mascarenhas/Entertainment
Contribute to Vasco-Mascarenhas/Entertainment development by creating an account on GitHub.
32 Replies
Mannix
Mannixβ€’17mo ago
probably path issue try changing imgs/thumbnails/undiscovered-cities/trending/small.jpg to ./imgs/thumbnails/undiscovered-cities/trending/small.jpg in data.json do that for all images
Azyrum
Azyrumβ€’17mo ago
Changed, still the same Screenshot: The path it's pulling the images from on vercel
Azyrum
Azyrumβ€’17mo ago
still need help with this 😦
b1mind
b1mindβ€’17mo ago
Mannix those are both the same really xD
ErickO
ErickOβ€’17mo ago
why is the image in an in-line style
b1mind
b1mindβ€’17mo ago
looks like they are building it all with client JS .. which πŸ€·β€β™‚οΈ I'd try just writing the CSS and give the class
Azyrum
Azyrumβ€’17mo ago
I'm mapping over the data array and using inline css to give the card a background-image
ErickO
ErickOβ€’17mo ago
pain
b1mind
b1mindβ€’17mo ago
try a direct path /imgs/ it should work cause you are in the root. I will say though not importing images with Vite it will not build with cache headers.
ErickO
ErickOβ€’17mo ago
are you using a framework? some frameworks require you to put your images in some /dist or /public path
b1mind
b1mindβ€’17mo ago
na its just flat index.html they load up
Azyrum
Azyrumβ€’17mo ago
Using vanilla vite
b1mind
b1mindβ€’17mo ago
So I assume you are not even using Vite build step?
Azyrum
Azyrumβ€’17mo ago
I am
b1mind
b1mindβ€’17mo ago
πŸ€” try the direct path and see
Azyrum
Azyrumβ€’17mo ago
While building, it ignores the imgs folder
b1mind
b1mindβ€’17mo ago
remove the . Right cause like Eric said vite looks for public folder for static assets I think by default I don't use vanilla vite so xD
ErickO
ErickOβ€’17mo ago
Azyrum
Azyrumβ€’17mo ago
I've only used vite with react so yeah
ErickO
ErickOβ€’17mo ago
so the images just aren't there
Azyrum
Azyrumβ€’17mo ago
had no idea it had this prob correct
b1mind
b1mindβ€’17mo ago
Yea cause you are not shipping them if its not in the build
ErickO
ErickOβ€’17mo ago
yup
b1mind
b1mindβ€’17mo ago
https://vitejs.dev/guide/assets.html#the-public-directory Docs are your friend in this case always
ErickO
ErickOβ€’17mo ago
Another instance of Erick being right 5Head next time folks
b1mind
b1mindβ€’17mo ago
so you would move your /imgs/ to public/imgs/ and use a absolute path like I was saying /imgs/
Azyrum
Azyrumβ€’17mo ago
worked Was a dummy and didn't read the docs thanks everyone ❀️
ErickO
ErickOβ€’17mo ago
πŸ‘
b1mind
b1mindβ€’17mo ago
np also next time don't double ask though (ask in general to help with your post*), it is in the #πŸ“rules >.>;; bad habit to get into just figured I'd warn ya
Azyrum
Azyrumβ€’17mo ago
Yes boss, will do
Want results from more Discord servers?
Add your server