Vue2leaflet: The marker icon is not displayed in a vue.js webpack template

[Abdelaziz18003]

Description

The marker icon can't be loaded properly when using v-marker as shown in the image below (in Actual results). As you can see the marker img element is on the DOM but the src url is not pointing to the correct image.

Steps to Reproduce

here the code I am using, it is almost the same as provided in the README

import vue2Leaflet from 'vue2-leaflet'
export default {
  components: {
    vMap: vue2Leaflet.Map,
    vTilelayer: vue2Leaflet.TileLayer,
    vMarker: vue2Leaflet.Marker
  }
}

<!-- show map -->
<div style="height: 300px;>
  <v-map :zoom="12" :center="[location.lat, location.lon]">
    <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
    <v-marker :lat-lng="[location.lat, location.lon]"></v-marker>
  </v-map>
</div>

Expected Results

The marker image get displayed properly

Actual Results

The marker image is on the DOM but is not displayed properly

Browsers Affected

I tested it just on these browsers

• [x] Chrome
• [x] Firefox

Versions

• Leaflet: v1.2.0
• Vue: v2.3.4
• Vue2Leaflet: v0.0.57

[psychosis448]

Issue is known.
Add the following to main.js

// eslint-disable-next-line  
delete L.Icon.Default.prototype._getIconUrl  
// eslint-disable-next-line  
L.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')  
})

That worked for me :)

[Abdelaziz18003]

Thanks that worked for me too

[KoRiGaN]

Hi @Abdelaziz18003,

This issue seems to be a duplicate of #28.
I'm closing this one and only keep 28 until a good / better solution is found.

Micka

[simenJohnsen]

I had to add ".default" after each of the required() files to make it work:

delete Icon.Default.prototype._getIconUrl;
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,
});