解决Vite动态使用本地图片不显示问题

目前我们有这样一个数组

const tabbarData = [
  {
    text: '首页',
    image: 'tabbar/tab_home.png',
    imageActive: 'tabbar/tab_home_active.png',
    path: '/home'
  },
  {
    text: '收藏',
    image: 'tabbar/tab_favor.png',
    imageActive: 'tabbar/tab_favor_active.png',
    path: '/favor'
  },
]

export default tabbarData

当我们想使用v-for渲染页面时发现图片并不能正常显示，如果在webpack中我们可以使用requier来解决，但vite中并没有require，所以我们需要自己封装一个函数来使用：

export const getAssetUrl = (image) => {
  // 参数一：相对路径
  // 参数二：当前路径url
  return new URL(`../assets/img/${image}`, import.meta.url).href
}

然后使用这个函数即可正常显示图片

    <template v-for="(item,index) in tabbarData" :key="index">
      <div class="tab-bar-item">
        <img :src="getAssetUrl(item.image)" alt="">
        <span class="text">{{ item.text }}</span>
      </div>
    </template>