大家好，我是大澈！
本文约 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后小伙。
-
文章专注于前后端技术知识分享，包括：功能问题、技术资讯、实用干货。
-
遇到技术难题，在问答群里与众多同行朋友一起讨论成长。
关注微信公众号“ 程序员大澈 ”，免费加入问答群，一起交流技术难题与未来！
现在关注公众号，免费送你“ 前后端入行大礼包 ”，包含了：前后端面试题、面试技巧、简历模版、前后端学习路线图、前后端全技术栈学习笔记、前后端项目脚手架。
原文链接：https://juejin.cn/post/7348346769716068392 作者：程序员大澈
