vue3 + vite 静态资源处理（图片引入）

在vue3项目中遇到了需自定义高德地图中Marker坐标的打点图片，引入图片后发现本地没问题，部署线上后出现图片不显示的问题，记录一下

// 原来写法

let imagePath = this.flag ? '../../static/img/icon/a.png' : '../../static/img/icon/b.png'
var icon = new URL(imagePath , import.meta.url)

//修改后

let imagePath = this.flag ? 'a.png' : 'b.png'
var icon = new URL(`../../static/img/icon/${imagePath }.png`, import.meta.url)

查看 vite官网 后发现，不能直接填入变量，url 必须是静态的。要动态配置的话，需用 模板字符串的写法。