<think>我们正在讨论的是在
Vue3 + Vite项目中如何在
Vue文件中
引入静态
图片。根据引用内容，我们可以总结出几种方法：
在
Vue3 + Vite项目中，由于Vite使用原生ES模块，动态
引入静态
图片资源的方式与
Vue2 + Webpack有所不同。以下是几种常见的方法：
### 方法一：直接
导入（适用于单个资源）
这种方式适合在需要
引入特定
图片时使用，通过`import`
导入图片，Vite会处理并返回解析后的URL。
```
vue
<script setup>
import homeBg from '@/asse
ts/images/home/home_bg.png'
</script>
<template>
<img :src="homeBg" alt="背景
图">
</template>
```
### 方法二：使用`new URL`（适用于动态
路径）
当
图片路径需要动态生成时，可以使用`new URL`结合`import.meta.url`来解析
路径。这种方法特别适合在
循环中动态加载不同
图片的场景。
1. 创建一个工具函数（例如`utils.
ts`）：
```typescript
// src/utils/utils.
ts
export const getAssetImage = (path: string) => {
return new URL(`../asse
ts/images/${path}`, import.meta.url).href
}
```
2. 在
Vue组件中使用：
```
vue
<script setup>
import { getAssetImage } from '@/utils/utils'
</script>
<template>
<img :src="getAssetImage('home_bg.png')" alt="背景
图">
</template>
```
### 方法三：使用`import.meta.glob`（批量
导入）
如果需要批量
导入多个
图片资源（例如一个文件夹下的所有
图片），可以使用Vite的`import.meta.glob`功能。
1. 创建一个工具函数：
```typescript
// src/utils/utils.
ts
export const getAsse
ts = () => {
const modules = import.meta.glob('@/asse
ts/images/home/*.{png,jpg,jpeg,svg}', { eager: true })
const images: Record<string, string> = {}
for (const path in modules) {
const name = path.split('/').pop()?.split('.')[0] // 提取文件名（不含扩展名）
if (name) {
images[name] = (modules[path] as any).default
}
}
return images
}
```
2. 在组件中使用：
```
vue
<script setup>
import { getAsse
ts } from '@/utils/utils'
const images = getAsse
ts()
</script>
<template>
<img :src="images.home_bg" alt="背景
图">
<!-- 注意：这里假设
图片文件名为home_bg.png，则键为'home_bg' -->
</template>
```
### 方法四：使用公共目录（public目录）
对于不需要经过构建处理的静态资源（例如不会改名的文件），可以放在`public`目录下，然后直接通过根
路径引用。
```
vue
<template>
<!--
图片放在public/images目录下 -->
<img src="/images/home_bg.png" alt="背景
图">
</template>
```
### 注意事项
1. **
路径问题**：使用`new URL`时，相对
路径的起点是当前文件所在位置，所以要根据工具函数的位置调整相对
路径（如`../`）。
2. **类型提示**：在TypeScript中，使用`import.meta.glob`时可能需要类型断言，如`(modules[path] as { default: string }).default`。
3. **public目录**：放在`public`目录下的资源不会经过构建处理，直接拷贝到输出目录，因此适用于不需要构建处理的第三方库或大文件[^4]。
4. **文件变动**：使用`import.meta.glob`时，如果文件有变动（增删），需要重启开发服务器（或模块热更新可能不会立即生效）。
§§相关问题§§
1. 在Vite中如何为动态
引入的
图片资源配置别名（alias）？
2. 如何解决Vite项目中
引入静态
图片后打包
路径错误的问题？
3.
Vue3 + Vite项目中如何优化
大量图片资源的加载性能？
4. 在TypeScript中如何为`import.meta.glob`返回的模块提供类型定义？
</think>在
Vue3 + Vite 项目中
引入静态
图片资源的方法主要有以下几种方式，可根据不同场景选择使用：
### 方法一：直接
导入（推荐）
```
vue
<script setup>
// 单个文件
导入
import logo from '@/asse
ts/images/logo.png'
</script>
<template>
<img :src="logo" alt="Logo">
</template>
```
### 方法二：动态
路径（使用 new URL）
```
vue
<script setup>
// 工具函数（utils/imageHelper.js）
export const getImageUrl = (name) => {
return new URL(`../asse
ts/images/${name}`, import.meta.url).href
}
</script>
<template>
<!-- 在组件中使用 -->
<img :src="getImageUrl('banner.jpg')">
</template>
```
### 方法三：公共目录（public文件夹）
```
vue
<template>
<!-- 直接使用根
路径 -->
<img src="/images/background.png">
</template>
```
> 文件需放在 `/public/images/background.png` [^4]
### 方法四：批量
导入（多个静态资源）
```typescript
// utils/imageHelper.
ts
export const useImageAsse
ts = () => {
const modules = import.meta.glob('@/asse
ts/images/*.{png,jpg}', { eager: true })
const images: Record<string, string> = {}
Object.entries(modules).forEach(([path, module]) => {
const name = path.split('/').pop()?.split('.')[0] || ''
images[name] = (module as any).default
})
return images
}
```
```
vue
<script setup>
const { logo, banner } = useImageAsse
ts()
</script>
<template>
<img :src="logo">
<img :src="banner">
</template>
```
### 注意事项
1. **
路径别名**：推荐使用 `@` 别名指向 `/src` 目录[^2]
2. **
图片格式**：支持 PNG/JPEG/SVG/WEBP 等现代格式
3. **性能优化**：
- 小
图使用内联 base64（<10KB）
- 大
图使用异步加载
- 响应式
图片使用 `<picture>` + `srcset`
4. **TypeScript 支持**：
```
ts
// vite-env.d.
ts
declare module '*.png' {
const value: string
export default value
}
```
在Vue项目中，当面临大量图片引入的需求时，遇到的问题是使用`:src`绑定图片路径导致被当作字符串处理，从而无法正常显示图片。解决方案是将图片存放于`static`目录下，而非`assets`目录，通过相对路径动态引用。
扫一扫
1118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
