webpack中使用leaflet 时图标加载报错问题？

Question

1 在webpack中使用leaflet添加marker 时，使用默认marker报错

转码后的base64图标 后会多出来默认 marker 名称

webpack.config.js 中的相关配置

resolve: {
      alias: {
          '@':path.resolve(__dirname, './src'),
          leaflet_css: __dirname + "/node_modules/leaflet/dist/leaflet.css",
          leaflet_marker: __dirname + "/node_modules/leaflet/dist/images/marker-icon.png",
          leaflet_marker_2x: __dirname + "/node_modules/leaflet/dist/images/marker-icon-2x.png",
          leaflet_marker_shadow: __dirname + "/node_modules/leaflet/dist/images/marker-shadow.png",
      }
  },

代码部分

import "leaflet_css"; 
import L from "leaflet";

(function(){
    var map = L.map('map-osm-leaflet').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([51.5, -0.09]).addTo(map)
        .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
        .openPopup();
})();

Answer 1

对我也是遇见这种问题了 自己项目中的默认icon就不可以使用 同样的错误不知道为什么自己项目中会变成base64,但是在官网上就会变成cdn,

后来的解决方法是手动引入leaflet的图标

import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";

let DefaultIcon = L.icon({
            iconUrl: icon,
            shadowUrl: iconShadow
        });
L.Marker.prototype.options.icon = DefaultIcon;
new L.marker(//你marker的坐标位置).addTo(this.map); 

Answer 2

目前是自己传入图标，不使用默认图标时可以正常使用

(function(){
     var myIcon = L.icon({
         iconUrl: marker_icon,
         iconSize: [20, 20],
         iconAnchor: [10, 20],
    });

    var map = L.map('map-osm-leaflet').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([51.5, -0.09],{
        icon: myIcon
    }).addTo(map)
        
})();