Utilizing a variable in Vue.js to set the background image in the style template

Question

Utilizing a variable in Vue.js to set the background image in the style template

Is it possible to use a variable within the background-image of a style template?

I am trying to achieve something like the following:

 <script>
  export default {
    name: 'setCss',
    computed: {
    cssVars() {
      var ua = navigator.userAgent.toLowerCase();
      var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
      var path = '';
      if(isAndroid) {
        path = 'img/samsung/';
      } else{
        path = 'img/iphone/';
      }
      return {
        '--bg-path': path,
      }
    }
    }
  };
</script>

and then with this CSS:

    <style scoped>
div {
    background-image: var(--bg-path) + '/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37060401014f03070777054f4c147054">[email protected]</a>';
    background-size: 1366px 400px;
}

@media not all,
not all,
only screen and (max-width: 480px) {
    div {
        background-image: var(--bg-path) + '/480x288.jpg';
        background-size: 480px 288px;
    }
}

</style>

This approach does not seem to work, but I am exploring alternative ways to achieve this. Any suggestions?

javascript vue.js

Answer 1

Answer №1

To achieve this, you can utilize the concept of class and style binding.

In your scenario, implementing the binding style would resemble the following example. Initially, you will need to bind a style with the computed background image while retaining the remaining styles in your style tag.

<template>
 <div :style="{backgroundImage: computedBgImage}"></div>
</template>

...
computed:{
  computedBgImage() {
      let path;
      if (isAndroid) {
        path = 'img/samsung/';
      } else{
        path = 'img/iphone/';
      }
     return path + '/480x288.jpg'
  }
}
...

If you intend to reuse the same image in various locations, consider creating a class for each image and then binding the class rather than the style, as elaborated in the aforementioned link.

Answer 2

To achieve this, you can utilize the concept of class and style binding.

In your scenario, implementing the binding style would resemble the following example. Initially, you will need to bind a style with the computed background image while retaining the remaining styles in your style tag.

<template>
 <div :style="{backgroundImage: computedBgImage}"></div>
</template>

...
computed:{
  computedBgImage() {
      let path;
      if (isAndroid) {
        path = 'img/samsung/';
      } else{
        path = 'img/iphone/';
      }
     return path + '/480x288.jpg'
  }
}
...

If you intend to reuse the same image in various locations, consider creating a class for each image and then binding the class rather than the style, as elaborated in the aforementioned link.

Answer 3

Answer №2

To make this solution effective, all you have to do is pass the calculated property cssVars to the component as a dynamic style attribute like so:

<button :style="cssVars">My button</button>

Check out a live demonstration below:
(In this example, I am directly assigning a value to bgColor, but in reality, it could be passed as a prop to a component)

new Vue({
  el: "#myApp",
  data: {
    bgColor: "green"
  },
  computed: {
    cssVars() {
      return {
        '--bg-color': this.bgColor,
      }
    }
  }
})

button {
  background-color: var(--bg-color);
  padding:10px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <button :style="cssVars">My button</button>
</div>

Answer 4

To make this solution effective, all you have to do is pass the calculated property cssVars to the component as a dynamic style attribute like so:

<button :style="cssVars">My button</button>

Check out a live demonstration below:
(In this example, I am directly assigning a value to bgColor, but in reality, it could be passed as a prop to a component)

new Vue({
  el: "#myApp",
  data: {
    bgColor: "green"
  },
  computed: {
    cssVars() {
      return {
        '--bg-color': this.bgColor,
      }
    }
  }
})

button {
  background-color: var(--bg-color);
  padding:10px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <button :style="cssVars">My button</button>
</div>

Utilizing a variable in Vue.js to set the background image in the style template

Answer №1

Answer №2

Similar questions

What is the best way to merge the values of an array into one variable?

Utilizing the 'Day' Function in Visual Basic to alter the date and submit a form according to the day of the week

Can we tap into the algorithm of curveMonotoneX in d3-shape?

How to handle multiple formData input in NestJS controller

Using prerender.io in conjunction with native Node.js

Eliminate the ending slash from your Nuxt application

Using Confluence to Access a Unique REST API

The component encounters a transformation in which prop values shift to undefined

Error message: Unable to locate module using import instead of require

The image source is visible in Vue.js, but unfortunately, my picture is not showing up

Is it possible to use Selenium WebDriver to automate an HTML5 webpage?

Arranging a JSON data structure (varied sequence in Firefox)

A scheduled task in Node.js set to run every day at 2 AM

Mastering the use of expressions in ng-click and ng-show in AngularJS

Having issues with Vue.js v-repeat not displaying any content

Enhancing an existing node by adding a new node with jQuery functionalities at the same time

Angular implementation of a reactive form including a child component

Ways to perform a jQuery selection beginning with a pre-existing jQuery object

Adding a function to the window object using Webpack version 5

Unable to implement styling to an HTML element using Javascript