vue 根据后端返回字段动态设置背景图片

需求:

根据后端返回数据（上架产品的版本和类型）展示不同的图标

效果图：

本文用星座图来做个演示，上架产品的版本对应星座(狮子座Leo，天蝎座Scorpio，双子座Gemini)，类型对应简约图标(simple)和精美图标(fine)，先上一个效果图

完整代码：

<template>
<div style="height: 200px; width: 200px;">
  <div class="icon-demo" v-for="item in dataList" :key="item.id"  
       :style="setbg(item.version, item.type)">
    <p> {{item.version}} </p>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟后端返回数据
      dataList: [{
        id: '0',
        version: 'Leo',
        type: 'fine'
      },
      {
        id: '1',
        version: 'Scorpio',
        type: 'simple'
      },
      {
        id: '2',
        version: 'Gemini',
        type: 'fine'
      },
      {
        id: '3',
        version: 'Gemini',
        type: 'simple'
      }],
      // 这里一定要用require的方式引入图片，否则项目编译完渲染的时候路径有问题
      bgImg: {
        Gemini: require('@/assets/bg/Gemini.png'),
        Gemini_fine: require('@/assets/bg/Gemini_fine.png'),
        Leo: require('@/assets/bg/Leo.png'),
        Leo_fine: require('@/assets/bg/Leo_fine.png'),
        Scorpio: require('@/assets/bg/Scorpio.png'),
        Scorpio_fine: require('@/assets/bg/Scorpio_fine.png'),
      },
    }
  },
  methods: {
    setbg(version, type) {
      switch (version) {
        case 'Leo':
          return type !== 'fine' ? { backgroundImage: 'url(' + this.bgImg['Leo'] + ')' } : { backgroundImage: 'url(' + this.bgImg['Leo_fine'] + ')' };
        case 'Scorpio':
          return type !== 'fine' ? { backgroundImage: 'url(' + this.bgImg['Scorpio'] + ')' } : { backgroundImage: 'url(' + this.bgImg['Scorpio_fine'] + ')' };
        default:
          return type !== 'fine' ? { backgroundImage: 'url(' + this.bgImg['Gemini'] + ')' } : { backgroundImage: 'url(' + this.bgImg['Gemini_fine'] + ')' };
      }
    },
  }
}
</script>

<style>
  .icon-demo {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
  }
</style>