vue3循环展示本地图片

效果：

<template>
 <div v-for="(item, index) in [1,2,3,4,5]" :key="index" class="item-card-wrapper">
  <img :src="getImageUrl(index+1)" class="img" />
</div>
</template>
<script lang="ts" setup>
const getImageUrl = (index: number) => {
//获取assets/images/icon路径下全部的.png图片
//vue2使用require引入图片，vue3使用import.meta.glob引入图片
  const imgSrc = import.meta.glob('@/assets/images/icon/*.png', { eager: true })
  const src = `/src/assets/images/icon/sale-${index}.png`
//返回指定图片
  return (imgSrc[src] as { default: string })?.default
}
</script>