0

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.

Stephen Kennedy
  • 20,585
  • 22
  • 95
  • 108
JXKENG
  • 89
  • 3
  • 10
  • On one of the urls you might have cached some files. Try pressing CTRL+F5 on both and see if it fixes your problem. – MauriceNino Apr 11 '19 at 10:40
  • @MauriceNino I wasnt really sure what you meant, but I definitely tried to refresh all the links to my css files and retyped all my img tags. It didn't work, but when I tried to relink the images using dreamweaver, it works. Still no idea what was the problem, but thanks anyway! (: – JXKENG Apr 11 '19 at 11:36
  • Thats weird. Glad you could solve it anyways! :) – MauriceNino Apr 11 '19 at 11:39
  • Does this answer your question? [Why does my file load correctly through Live Server, but not through my browsers' support for the file:// protocol?](https://stackoverflow.com/questions/75637309/why-does-my-file-load-correctly-through-live-server-but-not-through-my-browsers) – starball Mar 04 '23 at 21:06

1 Answers1

1

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

Benny
  • 11
  • 2
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/32690473) – Vishal Beep Sep 17 '22 at 14:44