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

原文地址:https://www.cnblogs.com/dudu123/p/10234518.html

时间: 2024-10-16 09:32:56

vue 动态绑定背景图片的相关文章

微信小程序动态绑定背景图片遇到的问题

问题简述: 问题代码:利用字符串模板显示图片路径的变量img 报错信息: 解决方法: 1.使用字符串拼接 2.效果正常显示,但是会报一个错误 3.这是因为初次加载的时候变量img默认是undefind,所以解决的方法是利用计算属性,动态的计算img值 原文地址:https://www.cnblogs.com/ruilin/p/12543150.html

vue项目中设置背景图片

在vue项目开发中,我们经常会碰到动态添加背景图片的问题,可是当我们在样式中添加了背景图片后,背景图片并不能正常的显示出来,如下css样式 这个时候就要考虑使用其它方式了,node中提供了一种有效的方式来解决这个问题就是require 通过行内样式引入就可以解决背景图片不显示的问题了

Vue项目打包后背景图片路径错误

vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', 修改为: env

vue图片、背景图片路径问题

vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo.png" > 2.app.vue  <style>中引入图片 body {background: url('../static/img/back5.jpg');} 3.组件行间样式引入背景图片 <div style="background-image:url(’s

vue webpack打包背景图片

vue的背景图 和 img标签图大于10KB都不会转成base64处理,可以设置limit(不推荐),所以要设置一个公共路径,解决办法如下

分享几种CSS背景图片定位的方法

由于观测指标间存在相关性,将导致信息的重叠与低效,我们倾向于用少量的.尽可能多能反映原特征的新特征来替代他们,主成分分析因此产生.主成分分析可以看成是高维空间通过旋转坐标系找到最佳投影(几何上),生成新维度,其中新坐标轴每一个维度都是原维度的线性组合θ′Xθ′X(数学上),满足: 如果存在这么严重的问题,网络上应该早就有人遇到了.但实际上没有一个人提出类似的问题,并且我们使用的 jQuery 也是最新版:v1.12.4 为了避免 FineUIPro 的客户端 JavaScript 的影响,我们把

MFC 加入背景图片并让控件背景透明

/*加入背景图片*/ BOOL CTOOLDlg::OnEraseBkgnd(CDC* pDC) { // TODO: 在此加入消息处理程序代码和/或调用默认值 CDialog::OnEraseBkgnd(pDC); HBITMAP   m_hBitmap; HDC           m_hBkDC; m_hBitmap   =   ::LoadBitmap(::GetModuleHandle(NULL),MAKEINTRESOURCE(IDB_BITMAP2)); m_hBkDC     =

练习,背景图片开发慕课网右下角工具条

前几天学的慕课的一个课程,侧栏工具条开发.这门课程主要的学习价值: 1. 讲解的案例场景很实用,用到的技术点也较多,主要有css精灵,background-position,css transition,requirejs,sass,图标字体等: 2. 原理分析彻底,html结构清晰,sass逻辑合理,最重要的是在讲解过程中体现出的工作方法和工作态度,都能看出讲师的一些优秀的职业素质: 这门课的练习价值: 1. 掌握以上提到的知识点. 2. 看看在这个过程中会有哪些思考总结. 今天实现的方式是第

quick-cocos2d-x教程9:实例之加上背景图片

在梳理完quick-cocos2d-x框架的各个目录后,我们开始我们的实例教程,在helloworld后面,加上一张图片,lua编辑器,我用的lua editor,还不错. 我们首先还是参照教程,创建一个game01.命令:create_project -p com.cocos2dlua.game01 -r landscape,这次命令,我加了一个-r,设置为横向的屏幕 用quickplayer 打开game01, 显示helloworld,正常. 然后把game01\scripts目录下的co