vue3+ts开发时使用vant引入图片失败

vant官网 

 

 官网上的使用require引入,对于vue3+ts开发不适用,如果使用require会报错"require is not defined"

因此想要引入成功需要使用import的方式

<template>
   <van-image
        width="10rem"
        height="10rem"
        :src="imgUrl"
      />
</template>

<script lang="ts" setup>
    import {ref, onMounted} from "vue";
    onMounted(()=>{
       handleImgSrc();
    })
    const imgUrl = ref('');
    const handleImgSrc = async()=>{
        let image = await import('@/assets/images/home.png');
        imgUrl.value = image .default;
     };
</script>

此时引入成功!