在vite+vue3项目下el-image引用本地图片失败
el-image 图片引用失败
·
- 地址使用 ‘@/xxx/xxxx/…’ 绝对路径
- 地址使用require(‘…/xx/xx/…’)和require(‘@/xx/xx/…’)
- 地址使用相对路径不行(…/…/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
更多推荐
已为社区贡献2条内容
所有评论(0)