如何修复Vue 2 FelleT应用中未找到的默认标记-Icon.png？

Question

我有一个简单的示例项目， https：// https：// github.com/ericg-vue-questions/leaflet-test/tree/feature/simple-marker

（请注意功能/simple-marker分支）

相关代码在 flaflettest.vue 文件

<template>
    <div id="container">
        <div id="mapContainer"></div>
    </div>
</template>

<script>
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import Vue from 'vue';

export default {
    name: 'Map',

    methods: {
        async setupLeafletMap() {
            const center = [37, -122];

            const mapDiv = L.map('mapContainer').setView(center, 13);

            var tiles = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                minZoom: 3,
                maxZoom: 8
            }).addTo(mapDiv);

            L.marker(center).addTo(mapDiv);
        }
    },

    async mounted() {
        await Vue.nextTick();
        await this.setupLeafletMap();
    }
};
</script>

<style scoped>
#mapContainer {
    width: 500px;
    height: 500px;
}
</style>

在代码运行时，默认标记显示向上as：

IMG标签中的URL l.marker（中心）.addto（mapdiv）;添加到地图上，

<img src="marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="Marker" tabindex="0" role="button" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(250px, 250px, 0px); z-index: 250;">

我认为在配置VUE应用程序时需要做一些额外的事情，因此在这种情况下，传单可以一起使用。

我需要更改什么，以便默认情况下显示默认标记-Icon.png？

Answer 1

我发现的一个答案是修改opted（）方法为：

    async mounted() {
        delete L.Icon.Default.prototype._getIconUrl;

        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')
        });

        await Vue.nextTick();
        await this.setupLeafletMap();
    }

添加的部分是：

        delete L.Icon.Default.prototype._getIconUrl;

        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')
        });

如果我正确理解此处发生的事情是WebPack会看到需求并协助确保确保正确的事情发生了。如果有人对为什么有效的原因有更详细的解释，我会很感兴趣。