在vite+vue3项目下el-image引用本地图片失败

1. 地址使用 ‘@/xxx/xxxx/…’ 绝对路径
2. 地址使用require(‘…/xx/xx/…’)和require(‘@/xx/xx/…’)
3. 地址使用相对路径不行（…/…/xxx/xxx）

<el-image :src="require(@/assets/2.png)" />  //X
<el-image :src="require(../assets/2.png)" />  //X

<el-image src="@/assets/2.png" />//X  
<el-image src="../assets/2.png" />  //X

因为在vite2创建项目下，图片会自动在前面添加’http://localhost:3000’

http://localhost:3000/assets/images/xxx.png

解决：

<el-image class="logo-img" :src="logoImg" />
 
<script lang="ts">
import logoImg from assets/images/logo-top.png
export default{
          
   
	setup() {
          
   
		return {
          
   
			logoImg,
		}
	},
}
</script>

用vue-cli脚手架，基于webpack打包，require(@/xxx/xx)绝对路径和require(…/xxx/xx)相对路径就可以，必须要带有require，直接使用相对路径或绝对路径引用就不行

<el-image :src="require(@/assets/2.png)" />  //√
<el-image :src="require(../assets/2.png)" />  //√

<el-image src="@/assets/2.png" />  //X
<el-image src="../assets/2.png" />  //X