Unit 0 · What a computer actually does
Why your image works locally but not online
The path points at a folder on your own computer. The server is a different machine with no Desktop and no C: drive, so it finds nothing there. Put the image in the site folder and use a relative path.
The mix-up
What people often think
“If the file is on my Desktop, the website can find it there.”
What the tutor says
The server is a different computer with no Sam and no Desktop. A full path from your laptop points at nothing on the server.
Whose Desktop would the server look on?
How it works
When you open a page straight from your laptop, the browser can read your files, so a full path such as C:\Users\Sam\Desktop\logo.png or file:///Users/sam/Desktop/logo.png seems to work. Upload the page and that path still points at Sam’s Desktop, which does not exist on the server or on any visitor’s computer.
Swapping backslashes for forward slashes does not help, and neither does adding file://. The problem is the folders, not the slashes.
The fix is to keep every file the page uses inside the site folder and point to it from the page itself, for example images/logo.png. That path means the same thing on your laptop and on the server.
Side by side
<img src="C:\Users\Sam\Desktop\logo.png" alt="Corner Bakery logo"><img src="images/logo.png" alt="Corner Bakery logo">Close cousins of this mix-up
The tutor watches for these in the same lesson.
“The C: drive address works anywhere.”
C: is a drive on one Windows computer. Visitors and servers cannot see your drive, and the logo is not even in that folder.
“Adding file:// turns a laptop path into a web link.”
file:// still points at a folder on one computer. Visitors need a path the server can follow, like menu.html.
Practise it with a tutor watching
Files and folders
Build a folder tree and write the path that finds any file in it.
Free, no account needed.