How to dynamically set a computed background image in Vue 2

Question

How to dynamically set a computed background image in Vue 2

I have several divs that I want to style with backgrounds from values stored in an array. My attempt to set the background overlay for each one by creating a computed property has not been successful:

 computed: {
      backgroundImage(url) {
        let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))';
        return 'background-image:'+ overlay +' , url(' + url + ');';
      }
    }

I tried passing the URL like this to the computed property:

:style="{ backgroundImage: url(`${articles[0].image.src}`) }"

However, this approach is not returning the computed value as expected. How can I resolve this issue?

javascript vue.js

Answer 1

Answer №1

When it comes to a computed property :

computed: {
    displayBackgroundImage: () => (url) => {
        let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))';
        return 'url("' + url + '"), ' + overlay;
    }
}

As for methods:

methods: {
    showBackgroundImage(url) {
        let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))';
        return 'url("' + url + '"), ' + overlay;
    }
}

Here is how you can use it :

:style="{ 'background-image': showBackgroundImage(articles[0].image.src)}"

Answer 2

When it comes to a computed property :

computed: {
    displayBackgroundImage: () => (url) => {
        let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))';
        return 'url("' + url + '"), ' + overlay;
    }
}

As for methods:

methods: {
    showBackgroundImage(url) {
        let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))';
        return 'url("' + url + '"), ' + overlay;
    }
}

Here is how you can use it :

:style="{ 'background-image': showBackgroundImage(articles[0].image.src)}"

Answer 3

Answer №2

When your data remains constant and the background doesn't change, you can easily set the background using this method:

:style="{ background: `url(${articles[0].image.src})`}"

If the articles need to be computed first, then you can include that process or other values in your computed object

 computed: {
   backgroundImages() { 
     const overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))';
     return articles.map(article => 'background-image:'+ overlay +' , url(' + articles[0].image.src + ')');
   }

And then use it like this:

:style="{ background: backgroundImages[0]}"

Answer 4

When your data remains constant and the background doesn't change, you can easily set the background using this method:

:style="{ background: `url(${articles[0].image.src})`}"

If the articles need to be computed first, then you can include that process or other values in your computed object

 computed: {
   backgroundImages() { 
     const overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))';
     return articles.map(article => 'background-image:'+ overlay +' , url(' + articles[0].image.src + ')');
   }

And then use it like this:

:style="{ background: backgroundImages[0]}"

How to dynamically set a computed background image in Vue 2

Answer №1

Answer №2

Similar questions

Vue JS Meta Tags not displaying images on Open Graph

Vue component encounters issue with exporting JavaScript functions

Display scrollable content at the bottom

Fetching data in VueJs before redirecting to a new page

Why do React components require immutable props when values are passed by value regardless?

Creating an inverted curve or border-radius for a div element is a design technique that can add

Shut down the tab or browser window containing information on vue

Fade effect on content in Bootstrap carousel

What is the best way to create a screen capture of a webpage using a URL?

Restricting the amount of requests per user within a single hour [Node.js]

What is the process for retrieving user data from Postgresql using axios.get when the data is already stored within the database?

Utilize a function as a parameter

Concealing applicationId and clientToken in Datadog

Encountering a proxy error while attempting to create an account or log in, with no network

Using Laravel and Vue to make a POST request to an API endpoint, we utilized a web route instead

Setting model value in Angular 2 and 4 from loop index

Removing a row from MySQL using JQuery Ajax

Utilizing MutationObserver in JavaScript for Streamlined Code Execution

Is CDATA insertion automatic in JavaScript within Yii framework?

What is the method for assigning a string to module variable definitions?