vue :style设置背景图片方式backgroundImage
更新时间：2023年10月13日 16:20:53 作者：确认过眼神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")'}
}
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Vue之表单事件的数据绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助,希望能够给你带来帮助2021-11-11
这篇文章主要介绍了构建Vue大型应用的10个最佳实践(小结),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
今天小编就为大家分享一篇vue设置动态请求地址的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue中异步函数async和await的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中button标签样式和功能禁用的写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue中安装element-ui失败问题原因及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
错误处理是框架设计的核心要素之一,框架的错误处理好坏,直接决定用户应用程序的健壮性以及用户开发应用时处理错误的心智负担,本文将从源码入手,剖析一下Vue3中是如何进行错误处理的,需要的可以参考下2024-01-01
vue3 TS vite element ali-oss使用教程示例
这篇文章主要为大家介绍了vue3 TS vite element ali-oss使用教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
后台管理系统经常会使用到一个左侧菜单栏,右侧Tab页的页面显示结构,这篇文章主要给大家介绍了关于element ui动态侧边菜单栏及页面布局实现的相关资料,需要的朋友可以参考下2023-09-09
Vue如何整合mavon-editor编辑器(markdown编辑和预览)
这篇文章主要介绍了Vue整合mavon-editor编辑器(markdown编辑和预览)的相关知识，mavon-editor是目前比较主流的markdown编辑器，重点介绍它的使用方法,需要的朋友可以参考下2022-10-10
最新评论