解决leafletjs 在 vite 环境打包后自定义marker 图标不显示问题

背景

使用leafletjs 创建地图应用时难免要涉及自定义样式相关问题，其中自定义定位图标比较常见。但博主遇到在vite环境下自定义marker图标 打包后不显示问题，地址解析错误。

问题代码

这是博主原始封装的生成icon 函数，其中 new URL(url, import.meta.url).href 便是问题源头。

export const setIcon = (url: string, size: [number, number] = [30, 30], anchor: [number, number] = [16, 16]) => {
  return L.icon({
    iconUrl: new URL(url, import.meta.url).href,
    iconSize: size,
    iconAnchor: anchor,
  });
};

解决方案

修改图标 url 生成方案；

export const setIcon = (iconName: string, size: [number, number] = [30, 30], anchor: [number, number] = [16, 16]) => {
  return L.icon({
    iconUrl: new URL(`/src/assets/images/${iconName}.png`, import.meta.url).href,
    iconSize: size,
    iconAnchor: anchor,
  });
};

问题根源

为啥 new URL(url, import.meta.url).href不行？
假如传入的 url = ‘…/assets/images/xxx.png’
new URL() 会把它当成 相对 import.meta.url 的真实路径
Vite 不会对这种动态相对路径做处理，所以打包后解析成了 /dist/static/js/…/images/xxx.png
而写成这样的话 new URL(/src/assets/images/${iconName}.png, import.meta.url).href
Vite 在读取 /src/assets/… 这样的路径时，会：

• 自动进行 构建时资源处理

• 自动生成 hashed 文件名

• 自动替换路径为正确的 dist/assets/… 文件

总之 Vite 只会处理以 /src/…、@/… 或静态 import 的资源路径，其他路径不保证有效。

one more

你也可以把图标文件放在public 文件夹下
那就可以直接写

iconUrl: `/icons/${iconName}.png`

public 下的文件是原样 copy，不经过 Vite 处理