因为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>
如果大家还有更优的方法,不妨在下面留言,一起进步