Marker in leaflet JS does not load properly due to ERR_INVALID_URL error

Question

I am trying to add markers to my Leaflet map but they don't show up.

In the console I see an network error: net::ERR_INVALID_URL for a http request loading an image like this:

Request URL: data:image/png;base64,iVBORw0KGgoAA.....SUVORK5CYII=")marker-icon-2x.png

If I remove that last part of the URL

)marker-icon-2x.png

I end up with a proper base64 encoded image. So I guess the question is what that marker-icon is added in the end of the URL.

More background:

• My code looks something like this:

L.marker(coords).bindPopup(someName).addTo(this.map)

• My map renders correctly and I can draw polygons on it and more.

• I'm using Vue and Vue2Leaflet

• I have imported the leaflet.css

• I have tried to include these lines of code without effect:

delete Icon.Default.prototype._getIconUrl

Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

Answer 1

This works:

import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png').default,
    iconUrl: require('leaflet/dist/images/marker-icon.png').default,
    shadowUrl: require('leaflet/dist/images/marker-shadow.png').default,
});