Is there a way to dynamically change the background-image on a CSS class within an imported component?
I have successfully installed 'vue-range-slider' and imported RangeSlider.
The setup for the range-slider is as follows:
<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>
In this scenario, I am currently sending a specific image to the slider but I would like to be able to dynamically change the image using the data option, emoji, within the component.
Question
How can I achieve dynamic updates to the background-image in the imported .range-slider-knob class?
I had previously attempted using CSS variables in a different question on SO (Dynamically add image with css variable in vue) but was informed that it was not possible.