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

周星星_ya

已于 2023-09-15 18:32:59 修改

阅读量455

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue vue.js 前端笔记

于 2023-09-15 18:32:25 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45749030/article/details/132909395

vue 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在Vue3项目中使用高德地图时，如何从变量切换不同图标图片的问题。起初尝试直接使用变量，但在线上部署时遇到问题。解决方法是通过模板字符串将变量插入到静态URL路径中，遵循Vite的要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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)