vue中静态资源文件中的图片element.style.backgroundImage设置url无效问题

静态文件中的图片直接通过以下这种方式是无效的

element.style.backgroundImage = 'url("@/assets/img/btn_checkbox_nor@2x.png")';

但是在css中可以这样设置,这样设置会出现webpack打包找不到的问题

...
</script>
<style lang='less' scoped>.choose-item-img {background-image: url("../assets/img/btn_checkbox_nor@2x.png");background-repeat: no-repeat;background-position: -6px -6px;background-size: 24px 24px;}
</style>

非静态可以这样设置

<div :style="{backgroundImage: 'url(' + img + ')'}">
</div>
<div :style="{backgroundImage:`url(${img})`}">
</div>

js设置的方法需要通过引入

choicePerson(event) {this.isChoice = !this.isChoice;if (!this.isChoice) {event.currentTarget.style.width = '12px';event.currentTarget.style.height = '12px';event.currentTarget.style.backgroundPosition= '-6px -6px';// 这里可以通过require导入event.currentTarget.style.backgroundImage= 'url('+require('@/assets/img/btn_checkbox_nor@2x.png')+')';} else {event.currentTarget.style.width = '16px';event.currentTarget.style.height = '16px';event.currentTarget.style.backgroundPosition= '-4px -4px';event.currentTarget.style.backgroundImage= 'url('+require('@/assets/img/btn_checkbox_sel@2x.png')+')';}},

参考文章
https://blog.csdn.net/qq_43248623/article/details/107719794

https://blog.csdn.net/u013262823/article/details/86718145?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

https://www.cnblogs.com/qiuyueding/p/8953396.html#_label0

https://blog.csdn.net/qq_32682301/article/details/116050506

vue中静态资源文件中的图片element.style.backgroundImage设置url无效问题相关推荐

SpringBoot 读取项目中静态资源文件
目录一. ClassPathResource 二. DefaultResourceLoader 三. PathMatchingResourcePatternResolver 四. ResourceU ...
Qt解决资源文件中添加图片，对应控件不显示图片的问题
//资源文件--为控件添加图标//:/new/prefix1/image/mr.jpgQPixmap pic; //定义一个图片对象pic.load(":/new/prefix1/a.jpg ...
vue中使用a标签下载静态资源文件（比如excel、pdf等）后端不参与
问题描述平常我们在项目中需要做下载文件的功能,比如下载excel表格.比如下载pdf文件.比如下载word文档,这样的功能,一般是后端做,即:后端返回一个流文件.或者返回一个url地址- 但是,实际 ...
springboot中添加静态资源的方式，默认的静态资源文件夹有哪些
通过webjar的方式引入静态资源访问popular webjar网站,里面有大量的最常用的静态资源webjar,以jar包的形式导入静态资源.类如jquery.vue.bootstrap等,都可以 ...
在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案
在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案参考文章: (1)在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案 (2)https: ...
[WM C++]从资源文件中加载显示png/jpg图片
一. 实现代码 void DrawImage(HDC hdc,RECT& rc,UINT nIDResource,CString lpType) { HINSTANCE hInst = ...
详解vue静态资源打包中的坑与解决方案
详解vue静态资源打包中的坑与解决方案参考文章: (1)详解vue静态资源打包中的坑与解决方案 (2)https://www.cnblogs.com/goloving/p/8904545.html ...
SpringBoot项目中静态资源加载失败，那可能是自定义配置类继承了WebMvcConfigurationSupport这个类
1.跟着视频课学SpringBoot,自己的一个html登录页面就是在浏览器中渲染不出来效果,很郁闷.我的项目结构如下: 2.想要打开login.html页面,该页面用到了静态资源中的css文件及sv ...
spring mvc 中静态资源404、302错误
[求教]spring mvc 中静态资源404.302错误 (2019/3/22补充)在新的项目中也偶尔遇到资源被拦截的情况(前提我已经设置了各种静态资源不被拦截的措施),至今仍然没能找到具体原因,所 ...

vue中静态资源文件中的图片element.style.backgroundImage设置url无效问题

vue中静态资源文件中的图片element.style.backgroundImage设置url无效问题相关推荐

最新文章

热门文章