vue 动态绑定背景图片

Posted 2021-02-01 dudu123

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