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 動態綁定背景圖片