[Vuejs]-Vue.js change background-image on multiple conditions

by

0👍

✅

<template>
  <div :class="{background_image}"></div>
</template>

<script>
export default {
  // ...
  data() {
    return {
        backgroundImage: 'snow'
    },
   computed:{
    background_image : function () {

        switch(this.backgroundImage) {
            case 'snow':
                    return 'bg-snow';
            case 'rainy':
                    return 'bg-rainy';
            case 'sunny':
                    return 'bg-sunny';
            default:
                    return 'bg-default';
            }       
    }
  },
  methods: {
    apiCall() {
        //api call update background image according to the response
        this.backgroundImage = response ; // response contains sunny text
        
    }
  },
  // ...
}
</script>
<style>

.bg-sunny{
    background-image: url('sunny.jpg'); 
}

.bg-snow{
    background-image: url('snow.jpg'); 
}
.bg-rainy{
    background-image: url('rainy.jpg'); 
}
.bg-default{
    background-image: url('default.jpg'); 
}
</style>

0👍

You can achieve this behavior by looking up the image in an object, where you have defined your key and the corresponding image value. In addition, you need to tell webpack to require that media file. That require tells webpack to treat this file as a request.

<template>
  <div :style="{ backgroundImage: `url(${weatherTypes[getWeatherType()]})` }"></div>
</template>

<script>
export default {
  // ...
  data() {
    return {
      weatherTypes: {
        snow: require('some/path/snow.png'),
        sun: require('some/path/sun.png'),
        // ...
      }
    }
  },
  methods: {
    getWeatherType() { return 'snow'; },
  },
  // ...
}
</script>

Reproduction link

Leave a comment