vue :style设置背景图片方式backgroundImage
作者：确认过眼神cxy
这篇文章主要介绍了vue :style设置背景图片方式backgroundImage,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue :style设置背景图片backgroundImage
vue日常坑
vue :style 设置动态设背景图片 backgroundImage
控制台会报错 404错误，但是不影响页面使用
如下：
http://localhost:8080/ooooo/undefined 404 (Not Found)
主要是vue渲染机制问题
你可以设置data变量一个默认值，或者 v-if 判断网络图片路径存在，再加载图片
如下:
<div v-if='img ' :style="{backgroundImage: 'url('+ img +')'，backgroundSize:cover }"></div>vue动态设置style属性修改背景图片
原始class属性设置背景样式
.bannerP {
position: absolute;
top: 0;
left: 2.96rem;
right: 0;
bottom: 0;
background: url(../../assets/img/backgroundp.jpg) no-repeat center; // 本地静态图片路径
background-size: cover;
}通过JavaScript实现动态修改背景图片
首先html中设置style为 动态绑定 即 ：style
<div :class=" $store.state.isMobile?'bannerH':'bannerP'" ref="backGroundRef" :style="bacImage">
</div>在JavaScript方法中则可以通过修改绑定bacImage实现动态更换背景属性。
mounted () {
let imageName = 'mobile' //手机终端
// 通过浏览器判断终端为手机(true) 或者 pc(false) 动态切换背景图片
if (!this.$store.state.isMobile) {
imageName = 'web' // pc 浏览器
this.bacImage = {backgroundImage: 'url("https://rdet-oss-test.oss-cn-hangzhou.aliyuncs.com/admin/static/image/loginBackground.gif")'}
}
else {
this.bacImage = {backgroundImage: 'url("https://rdet-oss-test.oss-cn-hangzhou.aliyuncs.com/admin/static/image/web_background.jpg")'}
}
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。