uni-app vite h5 动态引用图片

<template>
  <view class="tab-wrap">
    <view class="tab-item" :class="[selected == tabItem.value ? 'selected' : '']" v-for="tabItem in tabItems" :key="tabItem.value">
      <view class="tab-icon">
        <img :src="getImageSrc(tabItem)" />
      </view>
      <text class="tab-text">{{ $t("mobile.common."+tabItem.label) }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "tab",
  props: {
    selected: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      tabItems: [
        {
          label: 'home',
          value: 'home'
        },
        {
          label: 'mine',
          value: 'mine'
        }
      ]
    }
  },
  methods: {
    getImageSrc(tabItem) {
      const suffix = this.selected === tabItem.value ? '-actived' : '';
      // 引用图片目录，可以是相对目录
      return new URL(`/src/static/mobile/tab/${tabItem.value}${suffix}.png`, import.meta.url).href;
    }
  }
}
</script>