如何动态地给el-button添加背景图片

我想用v-for渲染一组按钮，然后根据后台传过来的值去动态的设置每个按钮的名字、背景图片等，请问如何动态渲染出按钮的背景图片啊？

<el-row type="flex" justify="space-around" style="height:144px">
    <el-col :span="6" class="col-button" v-for="(item,index) in buttonList" :key="index">
        <el-button class="link-button" :style="background:url(item.backgroundUrl);"></el-button>
                <div>{{item.name}}</div>
    </el-col>
</el-row>

假设数据是这样：

buttonList:[
                {id:'1',name:'请假流程',backgroundUrl:'../../assets/img/logout.png',url:''},
                {id:'2',name:'会议室',backgroundUrl:'',url:''},
                {id:'3',name:'日志',backgroundUrl:'',url:''},
                {id:'4',name:'员工健康码',backgroundUrl:'',url:''},
            ]

这样子写，字符串 / 变量 都分不清楚么？

我代码中的并不能解决问题，所以请教一下大神们怎么才能正确请求？

:style="background:url(item.backgroundUrl);

1. 路径不对

使用本地图片，编译之后，图片路径会有所变化，并且名称后会拼接自定义字符串，建议使用img标签渲染图片之后，看一下实际路径，或者使用网络路径

2. 写法不对

真实写法如下
:style="{ background: "url('此处填写真实url')" }"

"{background:'url('')'}"