vue3利用JS切换背景图

VUE3利用JS切换背景图实践记录

需要实现的功能：鼠标移入移除图标切换（在这只做移入展示）

新建一个读取图片的函数，如下

// 动态读取图片
function getImageUrl(name: string) {
  return new URL(`../assets/images/product-icon/${name}.png`, import.meta.url).href;
}

完成如上，就可以在模板中读取项目中的静态资源了，如下所示：

 <span @mouseenter="changeIcon($event, '这里需要填写切换的图标名字')" :style="{ 'backgroundImage': 'url(' + getImageUrl(menuItem.icon) + ')' }"></span>
 //需要给个固定高度才能显示

接下来碰到了一个难题…

我使用，如下

function changeIcon(e: any, menuItem: any) {
  e.target.firstElementChild.style = `backgroundImage:url(${getImageUrl(menuItem.activeIcon)})`
}

根本切换不到图标、我甚至一度怀疑是不是要使用require、谁知到后面把backgroundImage换成background-image图标就出来了，不知道什么原理，评论区有知道的吗？🌚🌚

后续

使用这种方法发现后续如果要添加点击状态的时候，就很不好处理，所以乖乖换回了css背景图- - || ，利用class切换