Question

I am using jQuery and would like to display the images from my PC, rather than hosting them. I have the following:

/* works fine: */
.ui-widget-header .ui-icon {
  background-image: url(images/ui-icons_2e83ff_256x240.png);
} 

/* does not work: */
.ui-widget-header .ui-icon {
  background-image: url(file:///C:/ui-icons_2e83ff_256x240.png);
}

When I put file:///C:/ui-icons_2e83ff_256x240.png in a browser, it displays the actual image beautifully. Both locations are valid image locations.

Could this not working be to do with the image being a sprite? Does anyone have any ideas on this one? Many thanks.

Answer 1

Not possible due to security.

The only way to load images with ‘local’ file paths is to request the page using it’s local file path not the web server url. For example:

Instead of:

http://example.com/mypage.html

Use:

file:///C:/path/to/htdocs/mypage.html