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

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

• Chrome
• 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 😃

[anton-kazlouski]

@simenJohnsen thanks, I was struggling to find the solution.

Is there any explanation of a cause of the problem?