file paths for locally hosted site

Question

I'm learning how to make an image gallery with jQuery. the images file path is this for the final site.

<img src="images/gallery/refraction_thumbnail.jpg"/></a>

but when I'm loading it locally in my chrome browswer to test, the images aren't showing because the images are at this file path

file:///Users/name/Desktop/myGallery/images/gallery/refraction_thumbnail.jpg

Is there a convenient way to get the images to load on my local browser without manually changing all the file path links?

For example, I thought if I just put a / in front of "images" it might work but it didn't.

Answer 1

You should really use the correct path in the HTML.

However, I can see you are using the file protocol, so you are just experimenting. In that case, you could knock up some dirty jQuery code to do it for you.

$('img').attr('src', function(index, src) {
    return 'file:///Users/name/Desktop/myGallery/' + src;
});

Answer 2

if your site is stored in file:///Users/name/Desktop/myGallery it should work. Perhaps change the src to ./images/gal.... adding the ./ to look fro the current directory. a 2nd alternative would be to set up a webserver, such as apache, and call the page from there. I tend to try to mirror my production environment on my development machine as much as possible.

Answer 3

Stating a path with a '/' will go to the root directory. Unless you are running a virtual server this will be the root of your hard drive (not what you want).

I suggest you run a virtual server from the folder that your site is located in and prepend links with '/'. There are plenty of free easy to setup virtual servers out there for all operating systems. :)

This way you won't have to change any links when you come to upload to an actual server.