vue背景图片怎么用变量表示？

需求是这样的，容器的背景图片需要根据条件判断来显示不同的背景图

写法如下

//先在data里面定义背景图片变量
data() {return {backPic:require('../assets/img/logintfxq.png'),}}

注意，定义的时候本地图片一定要加上require，否则图片的src会被解析成字符串

    //created里面判断条件// 天府新区域名：http://tfxq-xxx.xxxx.com// 高新区域名：http://cdht-xxx.xxxx.comvar host = window.location.host    //获取当前浏览器域名if(host == 'tfxq-xxx.xxxx.com'){this.backPic = require('../assets/img/logintfxq.png')}else if(host == 'cdht-xxx.xxxx.com'){this.backPic = require('../assets/img/logincdht.png')}else{//都不是则显示默认背景图片this.backPic = require('../assets/img/defaltBack.png')}

vue背景图片怎么用变量表示？相关推荐

Vue背景图片去白边
在Vue中设置背景图片四周出现白边出现白边原因可能是默认条件下body的margin和padding有一个默认值导致的解决方法在public/index.html文件中加入以下样式 html ...
table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
Vue背景图片打包上线后出错问题解决
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: backgroun ...
vue背景图片路径问题
共三种情况: <div class="about" :style="{backgroundImage:'url('+pic+')'}"> <d ...
vue :style 设置背景图片 backgroundImage
vue 日常坑 vue :style 设置动态设背景图片 backgroundImage 控制台会报错 404错误,但是不影响页面使用如下: http://localhost:8080/ooooo/ ...
vue代码上传服务器后背景图片404解决方法
vue代码上传服务器后背景图片404解决方法参考文章: (1)vue代码上传服务器后背景图片404解决方法 (2)https://www.cnblogs.com/Mrrabbit/p/7830944 ...
vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件修改成为如下所示内容: 添加红框中的内容即可 ...
vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
vue 绑定背景图片、图片
vue 绑定背景图片最外面的div 样式为 background-repeat:no-repeat; 不填充 <div class="login-container" ...

vue背景图片怎么用变量表示？

vue背景图片怎么用变量表示？相关推荐

最新文章

热门文章