[GIS] absolute paths don’t work for the leaflet custom icons

file pathiconjavascriptleaflet

I've made an example leaflet project using a custom icon loading an image from the internet:

https://jsfiddle.net/dvdjsph/v30vL109/

As soon as I try to load something from my hard drive, however, the image won't load. This is how I'm trying to load it.

var offerIcon = new OfferIcon(
    { iconUrl: "C:\image.jpg"});

L.marker([0, 0], {icon: offerIcon}).addTo(markers).bindPopup(name);

I know that JS fiddle won't load this — it's on my hard drive. I just put up the example to show that, minus that path, everything else is working fine.

Is there something I'm missing about paths with Leaflet?

EDIT:

At Matej's suggestion, I tried putting an icon in the same folder as my template and referencing it like so:

var offerIcon = new OfferIcon(
    { iconUrl: "image.jpg"});

Still not working.

Best Answer

URLs must have a scheme (also called protocol). In most cases, the scheme is http:// or https://. If you do not specify a scheme, a browser will interpret that as a relative path, resolving it with the current scheme and hostname.

So if you have a webpage such as http://localhost/test/foo.html, and in that webpage is an image reference like <img src='C:/users/me/image.jpg'>, the full URL of the image will be resolved to http://localhost/test/C:/users/me/image.jpg.

If you want to use local files, remember to use the file:// URL scheme, e.g.: <img src='file:///C:/users/me/image.jpg'>.

Related Question