如何在Vue中为背景图片设置CSS变量？现有方案失效求指导

方法1：内联样式绑定 #

直接在目标元素上通过:style绑定背景图，这样能直接访问响应式变量icon：

<template>
  <div :style="{ backgroundImage: `url(${icon})` }"></div>
</template>

<script setup>
const icon = ref('image.jpg')
</script>

<style scoped>
div {
  width: 200px;
  height: 200px;
  /* 可添加其他样式 */
}
</style>

方法2：CSS变量传递值 #

先在元素上绑定CSS变量，再在scoped样式中引用这个变量：

<template>
  <div :style="{ '--bg-image': `url(${icon})` }"></div>
</template>

<script setup>
const icon = ref('image.jpg')
</script>

<style scoped>
div {
  width: 200px;
  height: 200px;
  background-image: var(--bg-image);
}
</style>

原方案失效原因 #

scoped样式属于CSS环境，无法直接读取Vue的响应式JS变量，必须通过上述方式将JS变量值传递到样式体系中。

内容的提问来源于stack exchange，提问作者sunday olorundipe