css - 在vue中导入组件的css类中更新背景图像

Question

我想动态更改导入组件中 ccs 类的背景图像我该怎么做？

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

范围 slider 按以下方式设置。

<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: "../assets/emoji_small.jpg",
    }
  },
  components: {
    RangeSlider
  }

</script>

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

.slider{
  width:200px;
}

.range-slider-knob {
    background-image: url("../assets/emoji_small.jpg")
}

</style>

在这种情况下，我要发送特定图像，但我想使用组件中的数据选项 emoji 动态发送图像。

问题
如何动态更新导入的 .range-slider-knob 类中的背景图像？

我在 SO ( Dynamically add image with css variable in vue ) 的前一个问题中尝试使用 CSS 变量，但得到的答复是那不可能

Answer 1

您不能在 <style> 中使用 vm 属性标记，但您可以更新 emoji在数据中:

emoji: require("../assets/emoji_small.jpg")

...然后使用以下方法将其传递给任何模板元素:

<whatever :style={backgroundImage: `url(${emoji})`} />

一个完整的例子:codesanbox .

我结合了require()用computed根据 slider 值更改加载的图像。