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