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图标就出来了，不知道什么原理，评论区有知道的吗？

vue3利用JS切换背景图相关推荐

vue.js 引用背景图 background 无效的3种解决办法
#vue.js项目中,出现css调用background背景图无效?如何解决? 或者调用<img>标签,也无效果? 直接上代码,自行对比查找一下: 效果图预览 1. 正确的代码,示例如下: ...
当鼠标移入时切换背景图时闪烁的问题
当页面第一次加载完成时,鼠标移入时需要切换的背景图还未被加载过,本地没有这张图片,所以切换的时候回出现闪烁的情况,我们可以在一个地方先把这张图放下,但是不让它显示出来,这样当我们第一次加载完页面时需要 ...
JS切换背景图片时的“白色闪屏”问题
before: document.body.style.backgroundImage = "url(xxx.jpg)"; after: // 修复切换背景图时出现的"白 ...
css js 打印背景图
参考:https://blog.csdn.net/lidysun/article/details/88995208 如果不对浏览器设置,直接打印时是无法打印背景图的. 方法1:css @media p ...
博客园随机切换背景图，超简单教程
目录一.前言二.准备工作三.实现代码四.结尾一.前言博客园做的还是挺强大的,很多东西都支持自定义,比较适合喜欢瞎捣鼓的小伙伴.之前写过一篇博客园看板娘的教程,有兴趣的小伙伴可以看一下:ht ...
vue 中实现动态切换背景图
1. 场景点击单选按钮动态切换背景图片 2. 代码 2.1 html 部分 <div :style="bgStyle"> </div> <a-rad ...
Vue动态切换背景图
最近在改写一个网站,抽离公共组件的时候,发现一个nav组件图标是用background-image显示的.把基本的框架抽离出去,具体菜单项用插槽,然后图片需要用props传参.写了一个小案例. 父组件 ...
JS实现背景图的颜色实时渐变
渐变通过@keyfram动画实现,通过不断改变背景颜色的位置. 首先设置大盒子的高度为100vh,宽度为100%,覆盖整个页面设置背景颜色:通过background的渐变属性 linear-grad ...
vue实现刷新页面随机切换背景图【适用于登陆界面】

vue3利用JS切换背景图

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

vue3利用JS切换背景图相关推荐

最新文章

热门文章