Changing the background image within a CSS class on an imported Vue component

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.

Answer №1

It is not possible to utilize vm properties within the <style> tag, but you have the option to modify the emoji in the data as follows:

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

... and then apply it to any template element using:

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

An illustrative example can be found here: codesanbox.

In my solution, I integrated the use of require() with a computed function that dynamically changes the loaded image based on the slider value.

Answer №2

Within the RangeSlider.vue file, it is evident on line 13 that the component contains a named slot called 'knob'. Utilizing Vue Slots allows for the passing of HTML/Vue content directly into the component.

A straightforward div element can be passed in with the ability to dynamically change its background using a method like what @tao has suggested. It's worth noting that while a name attribute is given to match the slot being replaced, this may not necessarily be required if it is the only slot within the component being utilized.

<range-slider
   class="slider"
   min="0"
   max="100">
   <div
      name="knob"
      :style={backgroundImage: url(emoji)}
   />
</range-slider>

This approach offers more flexibility in how the knob is presented and/or interacted with via JavaScript.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Vue.js to sort through data, extracting the properties of an object

I'm currently facing an issue with a filtering system on my website that is built in Vue.js. The system filters properties based on "states", "cities", and "type". While the code works smoothly for states and types, it seems to stumble when dealing wi ...

Accessing the Nuxt store in module mode from a JavaScript file

I'm facing a challenge with my Nuxt app, where I have an AuthService within a namespaced store. The issue lies in how to import the store into my AuthService so that I can commit mutations from there. In some examples I've seen, the store is imp ...

Is it possible to scale images dynamically using CSS without losing their proper proportions?

http://jsfiddle.net/CJzCA/ Is there a way to resize images using CSS in the above jsfiddle? The keyboard images are currently too big compared to the text, and I usually solve this issue by using Photoshop. It would be more convenient if we could resize t ...

In the world of MUI, how should one interpret the symbols '&', '>', and '*' when used together?

Currently, I am in the process of building a website using React. To help with this project, I purchased a Material-UI React template. As I was going through the code, I came across the line 4 where it mentions '& > *', and I'm not qu ...

VueJS Vuetify automatically centers default content

Vue cli version @ 5.0.6 | Vuetify version: [email protected] I have been utilizing Vue.js and Vuetify for some time now, and I can't shake the feeling that not all Vue.js/Vuetify components default to centered alignment. I recently initialized a ...

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

I am looking for a way to display a list of numbers from 1 to 1000 in a single line with the ability to scroll. However, I need to exclude both "Prev" and "1" from this list. How can I achieve this? Below is the code snippet that I currently have: echo ...

Utilizing Vue.js keep-alive to optimize performance by excluding Ionic components

The components from a specific library are not compatible with Vue.js' keep-alive feature. I have attempted to exclude them using exclude="/^ion-*./", but it has not been successful. These components do not have a designated name. Is there a way to p ...

HTML/CSS - How to make an element wider than its containing element while staying visible

I am currently working on a web page that generates a table with a green background labeled by an h2 element. The challenge I'm facing is ensuring that the h2 element extends horizontally as far as the user scrolls so that there is always a green bar ...

In Bootstrap cards, image overlays are always displayed on top of the image

I'm struggling to understand why I can't get the image in this HTML snippet to appear anywhere other than on top. Despite my attempts to adjust z-index, use !important overrides, and try other methods for hours, I haven't been successful. My ...

Is it possible to alter the baseURL of axios dynamically within a Vue web page?

Currently, I am utilizing axios in a Vue project alongside Spring Boot. To perform testing on both local and cloud platforms (specifically, IBM's cloud foundry). Here is how axios is being implemented in main.js: var axios = require('axios&apos ...

When placed within a <li> element, the <a> tag will not create a hyperlink to a page, but it will

I have encountered an issue with my anchor links. All of them are working properly except for the one in the second ul with an href="page1". Interestingly, the link shows the correct destination at the bottom left of my screen and works when I right-click ...

passing a list of event handlers to v-on and invoking methods

In my Vue.js project, I am using a v-for loop to create a row of buttons from my data. The challenge I am facing is dynamically binding handlers to these buttons. <component is="button.component" v-for="(button, index) in group" :key="index" v- ...

How to customize the appearance of an element within a shadow DOM

I am currently implementing a custom CSS style over an application without the ability to modify its code. Initially, the DOM structure looked like this: <div class="foo"> <div class="bar"></div> </div> and I ...

Blurring the background creates an "inset shadow" problem when transitioning

Problem: Strangely, when using Backdrop-filter: blur(Xpx); during a transition as shown below, unexpected "inset Shadows" mysteriously appear until the end of the transition. https://i.stack.imgur.com/uij7F.gif Illustration of the Issue Using jsfiddle Sp ...

Javascript code creates a blur effect on webpage bodies

On my webpage, I have multiple elements, including a "change BG" button. When this button is clicked, I want to hide all other content on the page except for the button using JavaScript. Alternatively, clicking the button could blur out all other elements ...

What is the best way to transfer data to a component that is not directly related

I am looking to showcase an image, title, and description for a specific recipe that I select. Here is my setup using ItemSwiper (parent): <template> <Slide v-for="recipe in storeRecipe.data" :key="recipe.rec ...

Harnessing the power of JavaScript functions to display an image when clicked

Looking for help with making an image appear when clicking on one of three images? Despite trying different approaches, the desired result is still not achieved. I'm aware of using if else statements but exploring other methods. Any insights on what m ...

What steps are involved in creating a deployment version of a Vue.js CLI website?

After setting up my Vue.js CLI project, I successfully ran npm run dev and accessed it in the browser at port 8080. Then, I proceeded to make some modifications to the website. Next, I executed npm run build. I then transferred the contents of the dist fol ...

Create a data attribute object and assign to it the prop object received from the parent component

I am struggling with passing an object as a prop from a parent component and then utilizing it to initialize the child component with the received value. The main objective behind this is to create a dialog box that includes a child form component with mu ...

Dimensional adjustments for Semantic-ui dropdowns

Currently, we are attempting to transform bootstrap into semantic-ui. <select id="sayfaArama" class="ui search dropdown"> <option value="">Searching in pages...</option> </select> Take a look at this image I have encountered ...