Dynamically add image with css variable in vue

Question

I want to dynamically attach an emoji image to the knob on a vue slider . I have tried doing this using css variables but it has not been successful. I have also tried the following link Vue.js dynamic <style> with variables but I am still not getting it to work.

I have installed 'vue-range-slider' and have imported RangeSlider

The range-slider is set up the following way.

<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 {

}

I can add an emoji by adding an emoji image to the knob. This is done by adding the following css either between or under the template tags.

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

and then in the range-slider-knob css class I also added: background-image: var(--emoji_var)

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

So far so good.

Though the problem arises when I want to add an image dynamically.
I tried doing this by changing the --emoji_var variable to url('{{this.emoji_data}}') as below:

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

Though this resulted in that the image would not show.

Question:
How can I dynamically get the values from the data option (emoji_data) in the susScore component into the css variable (emoji_var) ?

Thanks

Nikolay Yankov · Answer 1 · 2020-06-18T18:32:38.460

0

This can be achieved in Nuxt app. In the template section add <style> tag and add your css with variables. Example:

<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>

edited Jun 18 '20 at 18:32

answered Jun 18 '20 at 16:30

Nikolay Yankov

376
1
4
12

Ok thanks for the reply. I was though wondering in the link for https://stackoverflow.com/questions/47322875/vue-js-dynamic-style-with-variables?noredirect=1&lq=1 , in the first answer to that question the author explains that you can do something similar but he is using Nuxt. Is this only possible with Nuxt or how come he is able to do it and not I? Thanks – user12288003 Jun 18 '20 at 16:45
I'll give it a try – Nikolay Yankov Jun 18 '20 at 18:17
OK, so how come it works in Nuxt but not otherwise? What is the difference? – user12288003 Jun 18 '20 at 18:29
I don't know what happens behind the scenes, why it actually translates the styles, it's strange, it shouldn't. – Nikolay Yankov Jun 18 '20 at 18:34

Dynamically add image with css variable in vue

1 Answers1

Linked