Problems with leaflet marker in production

[SashaLifashkin]

I use the leaflet in the application on vue 3.
Everything is working fine in development (npm run dev), but in production (npm run build), my app isn't able to locate the marker-icon.png and marker-shadow.png images.

In development:

In product:

How fix this problem?

[cescobaz]

Hello @SashaLifashkin ,

I think the issue is related to this one: Leaflet/Leaflet#4968
I ran into the same problem with Svelte+Vite and solved importing the images and using the imported vars as marker icon urls. More details here: https://cescobaz.com/2023/06/14/setup-leaflet-with-svelte-and-vite/

[ngangavic]

Thanks for sharing. This solved the marker icon issue I was facing

[EKliptus]

in 2025 with astro
"leaflet": "^1.9.4",
I am facing the same issue...
Solved but with workaround of workaround...

import L from "leaflet";
import "leaflet-gesture-handling";

// Manual icon import
import defaultMarkerIconRetinaUrl from "leaflet/dist/images/marker-icon-2x.png";
import defaultMarkerIconUrl from "leaflet/dist/images/marker-icon.png";
import defaultMarkerShadowUrl from "leaflet/dist/images/marker-shadow.png";

// This is the workaround of workaround for dev because leaflet have a bad concatenation
if (import.meta.env.DEV) {
  L.Icon.Default.imagePath = "";
}
// ok in prod but in dev need imagePath = ""
L.Icon.Default.mergeOptions({
    iconUrl: defaultMarkerIconUrl.src,
    iconRetinaUrl: defaultMarkerIconRetinaUrl.src,
    shadowUrl: defaultMarkerShadowUrl.src,
});

or custom icone like : https://leafletjs.com/examples/custom-icons/ overwrite default icon !

import L from "leaflet";
import "leaflet-gesture-handling";

// Manual icon import
import defaultMarkerIconRetinaUrl from "leaflet/dist/images/marker-icon-2x.png";
import defaultMarkerIconUrl from "leaflet/dist/images/marker-icon.png";
import defaultMarkerShadowUrl from "leaflet/dist/images/marker-shadow.png";

const defaultIcon = L.icon({
    iconUrl: defaultMarkerIconUrl.src,
    iconRetinaUrl: defaultMarkerIconRetinaUrl.src,
    shadowUrl: defaultMarkerShadowUrl.src,
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41],
  });
  
  // ....
  const marker = L.marker([lat, lon], { icon: persoIcon });
  marker.addTo(map);
  // ....

[mooonpark]

I have the same issue with astro and the first option works. 👍