最初写法：
子组件html部分代码：
<div class="file-card" :style="{backgroundImage: bgUrl}">...</div>
父组件html部分代码：
<infoCard v-for="(item,key) in dataShow" :title="item.title" :total="item.total" :icon="item.icon" :key="key" :bgUrl="item.bgUrl"></infoCard>
script部分：
dataShow:[{title:'表类别总数',total:0,icon:'android-list',bgUrl:'url("../../assets/infoCardBg1.png")'},{title:'字段总数',total:0,icon:'person',bgUrl:'url("../../assets/infoCardBg2.png")'},{title:'表总数',total:0,icon:'clipboard',bgUrl:'url("../../assets/infoCardBg3.png")'},]
结果发现背景图片渲染不出来，如果不用动态绑定，直接在style里写死的路径是没问题的。
解决办法：
路径添加一个require()， 问题解决了：
原因是webpack打包无法解析
dataShow:[{title:'表类别总数',total:0,icon:'android-list',bgUrl:'url(' + require('../../assets/infoCardBg1.png') + ')'},{title:'字段总数',total:0,icon:'person',bgUrl:'url(' + require('../../assets/infoCardBg2.png') + ')'},{title:'表总数',total:0,icon:'clipboard',bgUrl:'url(' + require('../../assets/infoCardBg3.png') + ')'},],
另外，我发现不用:style动态绑定样式，直接用css写路径的话，浏览器调试里生成的路径是这样的：
把这个动态绑定时的路径换成这个图片也可以正常显示 不知道这是什么原因， 如果有路过的大神知道的麻烦答疑解惑一下 ^_^
———————————————————————————————————————————
最近写的vue3项目 用的是vite 所以用require不行了
解决办法：路径前面加“src”
