vue 动态绑定背景图片
html
<div class="racetm" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}"> </div>
画重点
backgroundSize:'100% 100%' 背景图片大小 必须这么写 x轴 y轴 才能100覆盖
backgroundRepeat: 'no-repeat' 背景图片不重复
script 动态赋值
<script>
export default {
name: "racehome",
data(){
return{
baseImg: require('../../assets/images/other/campain_bg.jpg'),
coverImgUrl: '',
}
},
methods:{
_getracerule(){
getracerule({id: this.id},{'token':Cookies.get('token'),'platform': 'web'}).then((data)=>{
this.rule=data.rule;
this.coverImgUrl = data.bg_url;
})
},
}
</script>
css
.racetm
width: 100%
height:100%;
background:#fff
vue 动态绑定背景图片的更多相关文章
- vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
- vue css背景图片打包后路径问题
limit,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 name,后面是打包后的路径: loader,后面 limit 字段代表图片打包限制,这个限制并不是说 ...
- VUE 绑定背景图片的写法
<div v-bind:style='{"background-image":"url("+imgUrl+")"}' >< ...
- vue设置背景图片
现在data里面定义: note: { backgroundImage: "url(" + require("../../assets/home/bigdatabak.p ...
- vue动态绑定图片和背景图
1.动态绑定图片 <img class="binding-img" :src="require('../assets/images/test.png')" ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- vue的图片路径,和背景图片路径打包后错误解决
最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1 ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- vue图片、背景图片路径问题
vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...
随机推荐
- System.getProperty()获取系统的配置信息
原文地址:http://www.jsjtt.com/java/Javajichu/105.html 此处记录备用. 1. 通过System.getProperty()可以获取系统的配置信息,Syste ...
- webpack 运行提示“The ‘mode‘ option has not been set”的原因和解决方法
最近在研究webpack,当我执行npm run build / npm start / npm run server等命令时,都是提示下面的警告信息 WARNING in configuration ...
- 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验三:按键模块② — 点击与长点击
实验三:按键模块② - 点击与长点击 实验二我们学过按键功能模块的基础内容,其中我们知道按键功能模块有如下操作: l 电平变化检测: l 过滤抖动: l 产生有效按键. 实验三我们也会z执行同样的事情 ...
- CentOS6.5安装JDK8
上传JDK源码包,我用的jdk-8u144-linux-x64.tar.gz.解压它 tar -zxvf jdk-8u144-linux-x64.tar.gz 更改环境变量 vim /etc/prof ...
- cordova 插件 调用iOS社交化分享(ShareSDK:微信QQ分享)
1.github上已有的插件:https://github.com/nwpuhmz/ShareSDKPlugin 2.安装插件 cordova plugin add https://github.co ...
- Spring学习笔记--Spring IOC
沿着我们上一篇的学习笔记,我们继续通过代码学习IOC这一设计思想. 6.Hello类 第一步:首先创建一个类Hello package cn.sxt.bean; public class Hello ...
- day_4.23 简易计算器
''' 简易加减乘除计算器demo 2018-4-23 19:32:49 ''' #1.界面 print("="*50) print(" 欢迎使用计算器v0.1" ...
- G - Rabbit and Grass
大学时光是浪漫的,女生是浪漫的,圣诞更是浪漫的,但是Rabbit和Grass这两个大学女生在今年的圣诞节却表现得一点都不浪漫:不去逛商场,不去逛公园,不去和AC男约会,两个人竟然猫在寝食下棋-- 说是 ...
- 简单的Git流程
一.安装cygwin 略 二. 1.创建一个文件 $echo "中华人民共和国">>abc.txt 2.添加到文件追踪 $git add abc.txt 上一行是提交一 ...
- CodeForces 1056E - Check Transcription - [字符串hash]
题目链接:https://codeforces.com/problemset/problem/1056/E One of Arkady's friends works at a huge radio ...