vue3+ts 引用本地图片路径的解决方案

因为vue3相对vue2来说已经取消了“require”这块，在vue2中不管是页面还是js板块中引用图片途径的话都可以require('@images/xxx.png')，但是经过测试发现vue3如果这种引用的话是会报错的，提示找不到require

vue2中的vue.config.js配置@images别名

下面是正式在vue3引用的方法

首先说下我这个图片放置路径，我是放在assets/images/文件夹中

第一种、在页面内引用

<img src="../assets/images/a1.png" />

第二种、在js中引用

<template>
    <van-icon class="input-icon" :name="accIcon" color="#FABD1F" size="22px" />
</template>

<script lang="ts">
import accIcon from "@images/a1.png";
import passIcon from "@images/a2.png";

export default defineComponent({
    setup(){
        
        return { accIcon, passIcon };
    }
})
</script>

如果大家还有更优的方法，不妨在下面留言，一起进步