大家好,我是大澈!
本文约 800+ 字,整篇阅读大约需要 1 分钟。
今天做Vue3项目,在引用本地图片路径这块时,突然大脑就有点短路了。
在使用el-image组件加载本地图片时,总是提示Failed,图片显示不出来。
使用require当然也无济于事,因为我的项目脚手架用的是Vite。
于是,有了今天对在Vue3中引用本地图片路径,这个功能问题解决的整理,希望能帮到和我一样大脑突然短路的朋友们哈。
两种情况引用实现
1、在模版中使用
首先要注意这里使用的是img元素,不是el-image等图片UI组件。
此时使用相对路径或绝对路径都可以。
<template>
<img style="width: 100px; height: 100px" src="@/assets/01.png" />
</template>
在Vite脚手架搭建的项目中,下面几种情况都是不行滴,只能使用下面我们说的在逻辑中使用的方法!
<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
在Vue-cli脚手架搭建的项目中,必须要带有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、在逻辑中使用
掌握这种Vue3常规用法基本就OK了。
<template>
<el-image style="width: 100px; height: 100px" :src="accIcon" />
</template>
<script setup>
import accIcon from "@/assets/01.png"
</script>
如果你是Vue2项目,无论是在逻辑还是模版中,都用require就OK了。
结语
-
我是大澈,一个喜欢交朋友、喜欢分享、喜欢搞钱的90后小伙。
-
文章专注于前后端技术知识分享,包括:功能问题、技术资讯、实用干货。
-
遇到技术难题,在问答群里与众多同行朋友一起讨论成长。
关注微信公众号“ 程序员大澈 ”,免费加入问答群,一起交流技术难题与未来!
现在关注公众号,免费送你“ 前后端入行大礼包 ”,包含了:前后端面试题、面试技巧、简历模版、前后端学习路线图、前后端全技术栈学习笔记、前后端项目脚手架。