Vite build not resolved css ulr()
Just starting with vite and faced problem after build project.
During development everything was ok but after deploying on GH I realized that my background is missing images.
All my images used in HTML are visible beside background images from CSS.
Any reason why is that?
https://github.com/solracss/fem-social-proof-section
GitHub
GitHub - solracss/fem-social-proof-section
Contribute to solracss/fem-social-proof-section development by creating an account on GitHub.
11 Replies
if you look in the console, you can see two 404 errors:
i know
but as total newbie with vite i dont know how to solve this 😦
I'm guessing you're using relative paths instead of full URLs and they start with a /, but your site is hosted at /fem-social-proof-section/. If a relative URL starts with /, it will assume it's referencing the root level of the domain
should i copy this to assets?
You'r right
yeah, you need to copy that to assets in your build step, and also adjust the reference so that it's accurate to where it ends up when deployed
move them to new
/public
?
vite should then copycause right now, https://solracss.github.io/fem-social-proof-section/bg-pattern-top-desktop.svg and https://solracss.github.io/fem-social-proof-section/img/bg-pattern-top-desktop.svg both 404 as well, so I don't think the image is available online in the deployment
probably, yeah. I'm not super familiar with vite beyond using it in frameworks which set it all up for me
🙂
Moving to
public and changing img paths to /img/... helpednice!
sounds like you solved it but this is the documentation for that https://vitejs.dev/guide/assets.html
Vite
Next Generation Frontend Tooling