Vue3 单文件组件中style调用JS中的图片作为背景图片

1. 假设有四种颜色图片 先设置一个变量

let picColor = ref('red') // 设置图片名称

2. 通过 picColor 的变化设置可变图片

let bgImage = computed(() => {
    return require(`@/图片路径/${picColor}.图片格式`)
})

3. 在<style scoped></style> 中使用 bgImage

.div{
    background: v-bind("`url(${bgImg}) no-repeat center`");
}