image Relative Paths only work online, but not from local disk

Question

My images' relative paths do not work locally, instead they only work online when I push a commit to github and open the page with the web URL. My repository is synced with my dropbox folder which is mounted to my local disk, so the relative paths are supposedly same like following:

#container {
  background-image: url(/media/image.jpg);
}

the images just show up blank when I test view the page from my local disk :( so that I have to change them to absolute paths each time. super time consuming.

Any idea as to why this happens?

Answer 1

This is most likely because your paths are relative. If you run your site through WebMatrix or Visual Studio locally, it will pick up the image files as they will be present at:

localhost:xxxx/media/image.jpg

But when you open a html page in the browser, it is not running on a server so it will look for:

/media/image.jpg

One option to do this without installing bulky editors is use your local IIS and point it to your files. This way when you run it through localhost, your image paths will be understood by the browser.