在 vue 中动态添加带有 css 变量的图像

Question

我想动态地将表情符号图像附加到 vue 滑块上的旋钮上。我曾尝试使用 css 变量来执行此操作，但没有成功。 我也尝试了以下链接Vue.js dynamic <style> with variables，但仍然无法正常工作。

我已经安装了 'vue-range-slider' 并导入了 RangeSlider

范围滑块的设置方式如下。

<template>
  <div id="slider_div" >

  <range-slider
      class="slider"
      min="0"
      max="100"
  </range-slider>

 </div>
</template>

<script>
import RangeSlider from 'vue-range-slider'
import 'vue-range-slider/dist/vue-range-slider.css';

export default {
  name: 'susScore',
  data: function() {
    return {
      emoji_data: "../assets/emoji_small.jpg",
    }
  },
  components: {
    RangeSlider
  }

</script>

<style>
#slider_div{
  margin-top: 95px;
  margin-left: 4%;
}

.slider{
  width:200px;
}

.range-slider-knob {

}

我可以通过在旋钮上添加表情符号图像来添加表情符号。这是通过在模板标签之间或下面添加以下 css 来完成的。

<style >
    :root {
       --emoji_var: url("../assets/emoji_small.jpg");
     }
  </style>

然后在 range-slider-knob css 类中我还添加了：background-image: var(--emoji_var)

   .range-slider-knob {
        background-image: var(--emoji_var)
   }

到目前为止一切顺利。

虽然当我想动态添加图像时会出现问题。
我尝试通过将--emoji_var 变量更改为url('{{this.emoji_data}}') 来做到这一点，如下所示：

  <style >
    :root {
       --emoji_var: url('{{emoji_data}}'); 
     }
  </style>

虽然这导致图像不会显示。

问题：
如何将 susScore 组件中的数据选项 (emoji_data) 中的值动态获取到 css 变量 (emoji_var) 中？

谢谢

Answer 1

这可以在 Nuxt 应用程序中实现。在模板部分添加 <style> 标记并添加带有变量的 css。示例：

<template>
  <div>
    <div>
      <ToolbarMenu />
    </div>
    <style>
       :root {
         --main-bg-color: {{ this.colorFromData }};
       }
       body {
           background-color: var(--main-bg-color)
      }
    </style>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorFromData: 'blue',
    }
  }
}
</script>