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