我用的是React传单。我是这么做的。

import markerIconPng from "leaflet/dist/images/marker-icon.png"
import {Icon} from 'leaflet'

然后，在MapContainer中：

<Marker position={[lat, lng]} icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})} />

尝试添加图标：

const myIcon = L.icon({
   iconUrl: 'myIcon.png',
   // ...
});

L.marker([37.98, 23.72], {icon: myIcon})
  .addTo(this.map)

也许您对默认的配置有一些问题：https://leafletjs.com/reference-1.6.0.html#icon-default

以下是最后对我起作用的方法（我在webpack上）：

const defaultIcon = new L.icon({
  iconUrl: require('../node_modules/leaflet/dist/images/marker-icon.png'); // your path may vary ...
  iconSize: [8, 8],
  iconAnchor: [2, 2],
  popupAnchor: [0, -2]
});

generateMarkers().forEach( c=> {
   L.marker(c, {icon: defaultIcon}).addTo(this.map).bindPopup('a marker; yeah').openPopup();
}

仅供参考，这是由于webpack试图将Leaflet CSS中指定的标记图标图像文件作为静态资产包含在不同文件夹中，并可能对文件进行重命名（例如，用于指纹）;所有这些都干扰了Leaflet算法，该算法仅将该图像用作指向其实际CSS图像文件夹的指针，因此，在Webpack构建步骤之后，该文件夹可能完全丢失。
请参阅https://github.com/Leaflet/Leaflet/issues/4968中的详细信息
我专门做了一个传单插件来解决这个问题：https://github.com/ghybs/leaflet-defaulticon-compatibility
从CSS中检索所有Leaflet默认图标选项，特别是所有图标图像URL，以提高与修改CSS中URL的捆绑包和框架的兼容性。
不幸的是，它在CodeSandbox（甚至StackBlitz）中仍然不起作用，因为后者不处理这些静态资产。只要尝试使用Leaflet Layers控件就可以看到它，该控件使用了一个非常简单的CSS背景图像，这在CodeSandbox中也是缺失的。
但是在你自己的环境中一切都应该很好。
CodeSandbox中的演示：https://codesandbox.io/s/elegant-swirles-yzsql
在StackBlitz中（相同的静态资产问题）：https://stackblitz.com/edit/react-vqgtxd?file=index.js

包括在index.js文件中。

import markerIcon from "../node_modules/leaflet/dist/images/marker-icon.png";
L.Marker.prototype.setIcon(L.icon({
  iconUrl:markerIcon
}))

我猜一个简单的方法就是改变图像路径：

L.Icon.Default.imagePath='images/'

我使用react，所以我将文件夹/node_modules/leaflet/dist/images复制到/public。

L.Icon.Default.imagePath='/path_to_your_images';
    var icon = L.icon({
        iconUrl: 'marker-icon.png',
        shadowUrl: 'marker-shadow.png',

        iconSize:     [25, 41],
        shadowSize:   [30, 65],
        iconAnchor:   [12, 41],
        shadowAnchor: [7, 65]
    });

这个解决方案对我很有效！