vue3 vite v-for动态创建img

通过 vite官网推荐的方式 new URL 

      

                        
                        
                        {{i.townName}}
                        
                        
{{i.waterUser}} 吨
                    

// 获取assets静态资源
 const getNumberImg = (url: any) => {
   return new URL(`../../assets/images/common/number-0${url}.png`, import.meta.url).href
}
const getNumberIconImg = (url: any) => {
   return new URL(`../../assets/images/common/number-0${url}-icon.png`, import.meta.url).href
}
const getProcessImg = (url: any) => {
   return new URL('../../assets/images/common/top'+url+'-progress.png', import.meta.url).href
}

注：此处最好使用模板字符串的方式拼接路径，使用字符串拼接，可能会造成项目打包后图片路径失效。