参考vite官方解决方式 注意:这种方式无法在SSR中使用

<template>
  <div class="homePage">
    <van-swipe class="my-swipe" :autoplay="1000" indicator-color="green" height="200">
      <van-swipe-item v-for="banner in bannerList">
        <img :src="getImageUrl(banner.name)" alt="">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts" setup>
const getImageUrl = (name: string) => {
  return new URL(`../assets/img/${name}.png`, import.meta.url).href
}
const bannerList = [
  {
    name: 'learn',
    type: 'imge'
  },
  {
    name: 'banner',
    type: 'imge'
  },
  {
    name: 'menu',
    type: 'imge'
  }
]

</script>

 new URL(`./img/${name}.png`, location.origin + '/src/assets/').href

其他引入方式请参考 vite官网 静态资源处理

多个资源导入:

 

Logo

前往低代码交流专区

更多推荐