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
Logo

前往低代码交流专区

更多推荐