vue项目动态引用背景图片

年底了，需要上线年度报告模块，因为有12个页面的统计数据，就有12张背景图片，如果每个页面单独写css，引入图片，如果图片的后缀修改，或者是图片位置存放修改，就需要每个页面都修改一次，比较麻烦。因此，就需要动态的引入背景图片，因为动态引入需要使用require.因此此处的写法稍显繁杂，一不小心就会出错，导致引入图片失败。所以这里记录一下

<component
                v-for="(page, index) in pageInfos"
                :key="index"
                :is="page.key"
                :style="{
                    zIndex: zIndex(index),
                    background: `url(${require(`@/assets/img/report/${page.bgName}.png`)}) no-repeat`,
                    backgroundSize: `100% auto`,
                    backgroundPosition: `center`
                }"
                :ref="`touch${index}`"
                v-bind="page.val"
            ></component>