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
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 imagesChanged, still the same
Screenshot: The path it's pulling the images from on vercel
still need help with this 😦
Mannix those are both the same really xD
why is the image in an in-line style
looks like they are building it all with client JS .. which 🤷♂️
I'd try just writing the CSS and give the class
I'm mapping over the data array and using inline css to give the card a background-image
pain
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.
are you using a framework? some frameworks require you to put your images in some
/dist or /public pathna its just flat index.html they load up
Using vanilla vite
So I assume you are not even using Vite build step?
I am
🤔
try the direct path and see
While building, it ignores the imgs folder
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 xDhttps://entertainment-fawn.vercel.app/imgs/thumbnails/bottom-gear/trending/large.jpg
I dunno, if you follow the path there's nothing there
I've only used vite with react so yeah
so the images just aren't there
had no idea it had this prob
correct
Yea cause you are not shipping them if its not in the build
yup
https://vitejs.dev/guide/assets.html#the-public-directory
Docs are your friend in this case always
Another instance of Erick being right 
next time folks
next time folksso you would move your /imgs/ to
public/imgs/ and use a absolute path like I was saying /imgs/worked
Was a dummy and didn't read the docs
thanks everyone ❤️
👍
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
Yes boss, will do