I have a website built entirely with the css templates provided by w3.css. I have multiple style sheets with the direct link to the online css files provided by w3.css and I do NOT have a css folder. I have an images folder with all my images.
Currently, when I load the website using VS Code's live preview plugin, the website displays perfectly, but when I open the index.html file manually, there seems to be an issue with the images / css. Why is this happening?
link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"
This a short line from my styles section.
img src="/img/header.jpg" alt="Lombok Beach" width="1600px" height="750px"
And this is one of the many image tags where the images are not showing.
I found the answer and it worked well for me. You should use 'relative' file paths instead of 'absolute' file paths. It means you shouldn't write a "/" (absolute path) in the first of direction. Start with a './' or nothing (relative). e.g: "img/header.jpg" On a live server environment, a '/' points to your root website dir. Watch this for more information: https://www.youtube.com/watch?v=BMT3JUWmqYY