Vue.js 在多个条件下更改背景图像答案

【问题标题】：Vue.js change background-image on multiple conditionsVue.js 在多个条件下更改背景图像
【发布时间】：2021-08-28 14:30:33
【问题描述】：

有没有办法根据条件更改背景图像？

我正在尝试构建一个天气应用程序，我将更改 div 的背景。喜欢：

天气 api 返回：

rainy -> 将背景图片更改为rain.jpg
snow -> 将背景图片更改为 snow.jpg
sunny -> 将背景更改为sunny.jpg
等

我已经尝试了多种方法，但没有任何效果。

【问题讨论】：

标签： css vue.js conditional-statements styles

【解决方案1】：

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

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。

【解决方案2】：

您可以通过在对象中查找图像来实现此行为，您已在其中定义了键和相应的图像值。此外，您需要告诉 webpack 需要该媒体文件。 require 告诉 webpack 将此文件视为请求。

<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

【讨论】：

谢谢。它正在工作，但背景图像没有显示出来。
我已将我的答案更新为更现代的答案。基本上你需要用 require 告诉 webpack 来导入图片。
严重依赖：一个依赖的请求是一个表达式
抱歉，问题是 Webpack 不能真正导入动态内容。我做了一些小的改动。另外，我添加了一个小的复制链接。