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


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?


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.


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'>.

|improve this answer|||||
  • That's good to know. Unfortunately, I'm still having my problem. I logged what the URL ends up like: "icon name is: file:///C:\django\website\media\images\offer_icons\46\foxes.jpg" Everything in the path is correct. – David J. Sep 19 '16 at 10:46
  • Use the "network" tab of your browser's developer console to see what's going on. – IvanSanchez Sep 19 '16 at 14:07
  • I know it's been a while, but I came back to this and looked at the network tab. what's strange is that, when I don't prepend the "file://" string, an error in loading is shown in the network tab. When I do prepend it, there are no errors displayed, but it doesn't show any image being loaded from the url. – David J. Sep 26 '16 at 22:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.