首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3+Vite使用图片资源

Vue3+Vite项目中使用图片资源的最佳实践

2026-06-11 09:38:48 作者：学且思

在这篇文章中,我们探讨了在Vite中使用图片的多种方法,包括直接使用路径字符串、导入图片、动态图片数组的实现方式以及使用public目录等绝对路径等,并提供了最佳实践建议以确保资源正确打包和处理,需要的朋友可以参考下

一、在 Template 和 Style 中使用图片

1.1 直接使用路径字符串

在模板和样式中，可以直接使用 @/ 别名路径：

<template>
	<img src="@/assets/verify/1.jpeg" alt="验证图片" />
	<div class="bg"></div>
</template>

<style scoped>
.bg {
	background-image: url(@/assets/verify/2.jpeg);
}
</style>

Vite 会自动解析模板和 CSS 中的 @/ 别名路径

1.2 导入后使用

在 <script setup> 中导入图片，然后在模板中绑定：

<template>
	<img :src="img" alt="验证图片" />
</template>

<script setup lang="ts">
import img from '@/assets/verify/1.jpeg'
</script>

二、动态图片数组的多种实现方式

方式一：字符串数组（不可行）

const verifyImages = [
	'@/assets/verify/1.jpeg',
	'@/assets/verify/2.jpeg',
	'@/assets/verify/3.jpeg',
	'@/assets/verify/4.jpeg',
	'@/assets/verify/5.jpeg',
	'@/assets/verify/6.jpeg',
]

问题：浏览器无法识别 @/ 别名路径，图片无法显示。

方式二：new URL()静态路径（推荐）

const verifyImages = [
	new URL('@/assets/verify/1.jpeg', import.meta.url).href,
	new URL('@/assets/verify/2.jpeg', import.meta.url).href,
	new URL('@/assets/verify/3.jpeg', import.meta.url).href,
	new URL('@/assets/verify/4.jpeg', import.meta.url).href,
	new URL('@/assets/verify/5.jpeg', import.meta.url).href,
	new URL('@/assets/verify/6.jpeg', import.meta.url).href,
]

优点：

Vite 在编译时能直接看到完整的静态路径
正确解析 @ 别名
自动将资源复制到输出目录并生成正确的打包路径

方式三：new URL()+ 模板字符串（不可行）

const verifyImages = [1, 2, 3, 4, 5, 6].map((i) => new URL(`@/assets/verify/${i}.jpeg`, import.meta.url).href)

问题：Vite 的静态分析无法处理动态生成的路径。

原因分析：

@/assets/verify/${i}.jpeg 在编译时是不完整的
Vite 无法预知运行时 i 的值
资源不会被提前处理和打包，导致 404 错误

方式四：ESM 静态导入（推荐）

import img1 from '@/assets/verify/1.jpeg'
import img2 from '@/assets/verify/2.jpeg'
import img3 from '@/assets/verify/3.jpeg'
import img4 from '@/assets/verify/4.jpeg'
import img5 from '@/assets/verify/5.jpeg'
import img6 from '@/assets/verify/6.jpeg'

const verifyImages = [img1, img2, img3, img4, img5, img6]

优点：

代码语义清晰
Vite 能正确处理所有资源
TypeScript 类型支持完善

方式五：import.meta.glob()批量导入（推荐用于大量图片）

const images = import.meta.glob('@/assets/verify/*.jpeg', { eager: true })
const verifyImages = Object.values(images).map((img: { default: string }) => img.default)

优点：

自动导入匹配的所有图片
代码简洁，易于维护
Vite 能正确处理所有资源

方式六：使用public目录 + 绝对路径（适合动态场景）

将图片放到 public/images/verify/ 目录：

const verifyImages = [1, 2, 3, 4, 5, 6].map((i) => `/images/verify/${i}.jpeg`)

特点：

✅ 支持动态路径拼接
⚠️ 资源不会经过 Vite 处理（无优化、无 hash）
⚠️ 需要手动管理资源版本

三、不同写法的对比

写法类型	静态分析	资源打包	推荐场景
`new URL('静态路径', import.meta.url)`	✅	✅	少量动态图片
`new URL(\`动态${path}`, import.meta.url)`	❌	❌	不推荐
`import img from '@/assets/...'`	✅	✅	明确引用的图片
`import.meta.glob('@/assets/*.jpeg')`	✅	✅	批量导入图片
`public` 目录 + 绝对路径	N/A	❌	需要动态路径场景

四、核心原则

Vite 需要在编译时知道完整的资源路径，才能正确打包。

✅ 静态路径：Vite 可以静态分析 → 资源会被处理
❌ 动态路径：Vite 无法静态分析 → 资源不会被处理

五、最佳实践建议

少量图片：使用 import 或 new URL() 静态路径
大量图片：使用 import.meta.glob() 批量导入
需要动态路径：将资源放到 public 目录
避免：在 new URL() 中使用模板字符串拼接路径

以上就是Vue3+Vite项目中使用图片资源的最佳实践的详细内容，更多关于Vue3+Vite使用图片资源的资料请关注脚本之家其它相关文章！