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使用图片资源的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue-router路由该如何使用，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要为大家详细介绍了vue实现登录时滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
在Vite中使用Terser插件可以对JavaScript代码进行压缩和混淆处理,本文就来详细的介绍一下Terser插件的使用,具有一定的参考价值,感兴趣的可以了解一下2025-10-10
这篇文章主要介绍了vue-cli 项目打包完成后运行文件路径报错问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了12 种使用Vue 的最佳做法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
今天小编就为大家分享一篇解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue中的img src 动态加载本地json的图片路径写法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue 动态绑定背景图片的方法,在文末给大家介绍了vue如何给v-for循环的标签添加背景图片，需要的朋友参考下吧2018-08-08
这篇文章主要为大家详细介绍了vue使用axios跨域请求数据的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
这篇文章主要介绍了vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多,本文分步骤通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
最新评论