功能问题：如何在Vue3中引用本地图片路径？

程序员大澈2024-03-20 22:47

大家好，我是大澈！

本文约 800+ 字，整篇阅读大约需要 1 分钟。

今天做Vue3项目，在引用本地图片路径这块时，突然大脑就有点短路了。

在使用el-image组件加载本地图片时，总是提示Failed，图片显示不出来。

使用require当然也无济于事，因为我的项目脚手架用的是Vite。

于是，有了今天对在Vue3中引用本地图片路径，这个功能问题解决的整理，希望能帮到和我一样大脑突然短路的朋友们哈。

两种情况引用实现

1、在模版中使用

首先要注意这里使用的是img元素，不是el-image等图片UI组件。此时使用相对路径或绝对路径都可以。

html 复制代码

<template>
    <img style="width: 100px; height: 100px" src="@/assets/01.png" />
</template>

在Vite脚手架搭建的项目中，下面几种情况都是不行滴，只能使用下面我们说的在逻辑中使用的方法！

html 复制代码

<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，直接使用相对路径或绝对路径引用是不行滴！

html 复制代码

<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了。

html 复制代码

<template>
    <el-image style="width: 100px; height: 100px" :src="accIcon" />
</template>

<script setup>
import accIcon from "@/assets/01.png"
</script>

如果你是Vue2项目，无论是在逻辑还是模版中，都用require就OK了。

结语

我是大澈，一个喜欢交朋友、喜欢分享、喜欢搞钱的90后小伙。
文章专注于前后端技术知识分享，包括：功能问题、技术资讯、实用干货。
遇到技术难题，在问答群里与众多同行朋友一起讨论成长。

关注微信公众号" 程序员大澈 "，免费加入问答群，一起交流技术难题与未来！

现在关注公众号，免费送你" 前后端入行大礼包 "，包含了：前后端面试题、面试技巧、简历模版、前后端学习路线图、前后端全技术栈学习笔记、前后端项目脚手架。