如上图所示，我们制作，tab切换功能，但是因为字体的原因，我们这里选择tab切换时，使用图片进行替换。但是 使用过程中发现一个问题，vue绑定图片“相对地址” 图片并不能展示出来。

完整代码部分：

<template>
<div class="zuop-award">
  <div class="work-title">
    <img src="../../../../src/assets/images/zuop_award/title.png" alt="" />
  </div>
  <div class="work-prize">
    <div class="prize-rank">
      <div
        v-for="(item, index) in tabList"
        :key="`list_${index}`"
        class="list-title"
        @click="changeTab(item)"
      >
        <div :class="[item.active ? 'title-active' : 'default']">
          <img v-if="item.active" :src="item.afterSrc" alt="" />
          <img v-else :src="item.beforeSrc" alt="" />
        </div>
      </div>
    </div>
  </div>
  <div class="work-content">
    <div v-if="tab === 1">11111</div>
    <div v-if="tab === 2">2222</div>
    <div v-if="tab === 3">3333</div>
  </div>
</div>
</template>

<script>
export default {
name: "ZuopAward",
data() {
  return {
    tab: 1,
    tabList: [
      {
        id: 1,
        name: "一等奖",
        active: true,
        beforeSrc: require("../../../../src/assets/images/zuop_award/one.png"),
        afterSrc: require("../../../../src/assets/images/zuop_award/one2.png")
      },
      {
        id: 2,
        name: "二等奖",
        active: false,
        beforeSrc: require("../../../../src/assets/images/zuop_award/two.png"),
        afterSrc: require("../../../../src/assets/images/zuop_award/two2.png")
      },
      {
        id: 3,
        name: "三等奖",
        active: false,
        beforeSrc: require("../../../../src/assets/images/zuop_award/three.png"),
        afterSrc: require("../../../../src/assets/images/zuop_award/three2.png")
      }
    ]
  };
},
methods: {
  changeTab(node) {
    this.tab = node.id;
    this.tabList.forEach(v => {
      v.active = false;
    });
    node.active = !node.active;
  }
}
};
</script>
<style lang="scss" scoped>
@import "../../../style/common.scss";
.zuop-award {
background: url("../../../../src/assets/images/zuop_award/bg734.png")
  no-repeat;
background-size: 100% 100%;
width: 100%;
font-size: 14px;
height: rem(2609);
.work-title {
  display: flex;
  justify-content: center;
  img {
    height: rem(120);
  }
}
.work-prize {
  margin-top: rem(20);
  .prize-rank {
    display: flex;
    justify-content: space-evenly;
    color: #fff;
    width: 80%;
    margin-left: 10%;
    color: #fff;
    .list-title {
      .title-active {
        color: blue;
      }
      .default {
        color: #fff;
      }
      img {
        width: rem(75);
        height: rem(80);
        object-fit: contain;
      }
    }
  }
}
.work-content {
  color: #fff;
  text-align: center;
}
}
</style>

使用相对地址代码部分：

 name: "ZuopAward",
  data() {
    return {
      tab: 1,
      tabList: [
        {
          id: 1,
          name: "一等奖",
          active: true,
          beforeSrc: "../../../../src/assets/images/zuop_award/one.png",
          afterSrc: "../../../../src/assets/images/zuop_award/one2.png"
        },
        {
          id: 2,
          name: "二等奖",
          active: false,
          beforeSrc: "../../../../src/assets/images/zuop_award/two.png",
          afterSrc: "../../../../src/assets/images/zuop_award/two2.png"
        },
        {
          id: 3,
          name: "三等奖",
          active: false,
          beforeSrc: "../../../../src/assets/images/zuop_award/three.png",
          afterSrc: "../../../../src/assets/images/zuop_award/three2.png"
        }
      ]
    };
  },

发现如果使用相对地址的话，图片根本无法展示出来，但我们使用了require，这时候，图片就可以完全展示出来了。