我使用Parcel 作为捆绑器并结合TypeScript 和Leaflet v1.4（通过npm 安装，以及它的类型）遇到了类似的问题，并使用Gil 的答案以稍微不同的方式解决了它.
import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import L, {
LatLngExpression,
FeatureGroup,
TileLayerOptions,
LayerEvent,
LeafletMouseEvent,
Marker,
Layer,
icon,
LayerGroup,
GeoJSON
} from 'leaflet';
import 'leaflet-draw';
import iconRetinaUrl from './assets/marker-icon-2x.png';
import iconUrl from './assets/marker-icon.png';
import shadowUrl from './assets/marker-shadow.png';
// Assign the imported image assets before you do anything with Leaflet.
Marker.prototype.options.icon = icon({
iconRetinaUrl,
iconUrl,
shadowUrl,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
tooltipAnchor: [16, -28],
shadowSize: [41, 41],
});
在另一个文件中，我添加了所需的声明，因此 TypeScript 允许我导入 png 图像，例如
declare module "*.png" {
const content: string;
export default content;
}
另外请注意，如果您使用需要访问这些图像的 Leaflet 插件，您可能还需要明确分配它，例如Leaflet draw 插件也需要它。示例：
map.addLayer(drawLayer);
const drawControl = new L.Control.Draw({
draw: {
circle: false,
circlemarker: false,
marker: {
icon: Marker.prototype.options.icon, // Assign icon explicitly
},
},
edit: {
featureGroup: drawLayer,
},
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, event => {
const layer = (event as LayerEvent).layer;
drawLayer.addLayer(layer);
});