vue 动态绑定背景图片

• Z时代
• 2024-01-10
• 分类：综合

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 动态绑定背景图片 的全部内容， 来源链接： utcz.com/z/376537.html