Search code examples
jqueryhtmlcssgoogle-chromeimagesource

file paths for locally hosted site

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.

Solution

  • 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;
});