<think>
我们正在讨论
Vue 3 + Vite项目中
动态设置img标签src属性的方法。根据提供的引用，有几种方法可以实现：
1
. 使用import直接导入
图片，然后在src绑定导入的变量（引用[1]）。
2
. 使用import
.meta
.globEager（或glob）来批量导入
图片，然后根据路径获取（引用[2]）。
3. 使用new URL(url, import
.meta
.url)来
动态构造资源的URL（引用[
3]和[4]）。
注意：在
Vite中，由于没有Webpack的require，所以不能使用require语法。
下面分别介绍这几种方法：
方法一：直接导入（适用于单个
图片或已知的有限
图片）
在script中导入
图片，然后将导入的变量绑定到src。
例如：
<script setup>
import deviceImg from &#
39;@/static/images/device
.png&#
39;
</script>
<template>
<img :src="deviceImg" />
</template>
方法二：使用import
.meta
.globEager（或glob）批量导入（适用于批量导入一个目录下的
图片）
注意：
Vite官方文档中，import
.meta
.globEager已被标记为弃用，推荐使用import
.meta
.glob(&#
39;*&#
39;, { eager: true })替代。
例如，我们有一个存放svg的目录：/src/assets/svgs/，我们可以这样写：
export const getSvg = (name) => {
const path = `/src/assets/svgs/${name}
.svg`
const modules = import
.meta
.glob(&#
39;/src/assets/svgs/*
.svg&#
39;, { eager: true })
return modules[path]?
.default
}
在组件中使用：
<img :src="getSvg(&#
39;fileName&#
39;)" />
但是注意，这种方法需要预先知道路径模式，并且路径必须匹配。
方法三：使用new URL(url, import
.meta
.url)（
动态路径）
这种方法可以直接根据相对路径生成一个完整的URL，适用于
动态拼接路径的场景。
例如：
let imageName = &#
39;a
.png&#
39;; // 假设这个变量根据条件变化
const imageUrl = new URL(`
./assets/images/${imageName}`, import
.meta
.url)
.href
然后在模板中使用：
<img :src="imageUrl" />
注意：这里的路径是相对于当前模块的路径（即当前文件所在目录）。另外，由于浏览器安全限制，
动态路径不能过于
动态（比如不能使用变量直接拼接，必须是相对路径的字符串字面量模板），所以通常使用静态的字符串模板，变量部分嵌入其中。
根据引用[
3]和[4]的例子，我们可以这样写：
let imagePath = this
.flag ? &#
39;a
.png&#
39; : &#
39;b
.png&#
39;
var icon = new URL(`
../
../static/img/icon/${imagePath}`, import
.meta
.url)
但是注意：在
Vite中，静态资源处理有特定的规则，建议将资源放在public目录或assets目录。放在public目录下的资源，在构建时会被直接复制到dist根目录，引用时使用绝对路径（例如`/img/icon/a
.png`）即可。而放在assets目录下的资源，则可以使用上述方法。
总结：
如果
图片数量固定且不多，推荐方法一（直接导入）。
如果需要从一个目录中
动态获取多个
图片，使用方法二（glob导入）。
如果需要根据运行时的变量
动态改变
图片路径（例如根据某个变量值选择
图片），使用方法三（new URL）。
注意事项：
使用方法三时，路径必须是相对路径，并且不能包含变量以外的
动态部分（比如不能使用运行时才确定的变量进行复杂计算）。另外，由于
Vite在开发模式和构建模式下的处理方式不同，使用new URL的方式在开发和生产环境下都能正常工作。
下面给出一个使用方法三的示例：
假设我们有一个
图片存放在 `src/assets/images` 目录下，文件名为 `avatar
.png`，那么我们可以这样写：
<script setup>
import { ref } from &#
39;
vue&#
39;
const imageName = ref(&#
39;avatar
.png&#
39;)
const imgUrl = new URL(`
./assets/images/${imageName
.value}`, import
.meta
.url)
.href
</script>
<template>
<img :src="imgUrl" alt="avatar">
</template>
但是，如果
图片路径是
动态的（例如从后端接口获取的
图片名），那么我们需要确保
图片位于正确的目录下。
另外，如果
图片位于public目录，例如public/img/avatar
.png，那么我们可以直接使用绝对路径：
<img src="/img/avatar
.png" />
或者
动态绑定：
<img :src="&#
39;/img/&#
39;
+ imageName" />
因为public目录下的文件不会被
Vite处理，直接复制到dist根目录，所以使用绝对路径即可。
因此，我们需要根据实际存放位置选择方法。
综上所述，在
Vue3+Vite项目中，
动态引入静态资源img标签src的三种常用方法：
1
. 使用import导入（适合固定
图片）
2
. 使用import
.meta
.glob（适合批量导入一个目录下的
图片）
3. 使用new URL（适合
动态路径，且路径由变量决定）
请根据实际需求选择合适的方法。
</think>
在
Vue 3 + Vite 项目中
动态引入静态资源（如
图片）到 `<img>` 标签的 `src` 属性，有以下几种可靠方法：
---
### 方法一：使用 `new URL()`（推荐✅）
通过原生
JavaScript 的 `URL` 构造器结合 `import
.meta
.url` 解析路径：
```
vue
<script setup>
import { ref } from &#
39;
vue&#
39;;
const imageName = ref(&#
39;a
.png&#
39;); //
动态文件名
//
动态生成资源 URL
const getImageUrl = (name) => {
return new URL(`/src/assets/images/${name}`, import
.meta
.url)
.href;
};
</script>
<template>
<img :src="getImageUrl(imageName)" />
</template>
```
**说明**：
1
. `import
.meta
.url` 提供当前模块的基准 URL
2
. `/src/assets/images/` 是
图片存放目录（路径需相对项目根目录）
3. 开发和生产环境均适用[^
3][^4]
---
### 方法二：使用 `import
.meta
.glob` 批量导入
适合需要批量导入某个目录下的
图片：
```
javascript
// utils
.js
export const getImage = (name) => {
const modules = import
.meta
.glob(&#
39;/src/assets/images/*
.png&#
39;, { eager: true });
return modules[`/src/assets/images/${name}
.png`]
.default;
};
```
```
vue
<script setup>
import { getImage } from &#
39;
./utils
.js&#
39;;
const currentImage = getImage(&#
39;banner&#
39;); // 获取 banner
.png
</script>
<template>
<img :src="currentImage" />
</template>
```
**注意**：
- `{ eager: true }` 表示立即导入而非懒加载[^2]
- 路径需完整匹配（包括扩展名）
---
### 方法三：直接导入单张
图片
适用于固定
图片或少量资源：
```
vue
<script setup>
import staticImage from &#
39;@/assets/images/logo
.png&#
39;;
</script>
<template>
<img :src="staticImage" />
</template>
```
---
### ️ 关键注意事项
1
. **避免使用 `require`**
Vite 不兼容 Webpack 的 `require` 语法[^1]
2
. **静态目录规则**：
-
动态资源推荐放在 `/src/assets/`
- 纯静态文件（如 robots
.txt）可放 `/public/`，通过绝对路径引用（如 `/img/icon
.png`）
3. **路径拼接问题**：
动态路径的模板字符串必须是**字面量**，否则
Vite 无法预构建：
```
js
// ✅ 正确（字面量路径）
new URL(`
./assets/${imageName}`, import
.meta
.url)
// ❌ 错误（变量路径不可分析）
const basePath = &#
39;
./assets/&#
39;;
new URL(`${basePath}${imageName}`, import
.meta
.url)
```
---
### 使用场景对比
| 场景 | 推荐方法 |
|--------------------------|----------------|
| 单张固定
图片 | 直接 `import` |
| 根据变量
动态切换
图片 | `new URL()` |
| 批量导入整个目录的
图片 | `import
.meta
.glob` |
---
### 示例：
动态切换图标
```
vue
<script setup>
import { ref, computed } from &#
39;
vue&#
39;;
const iconType = ref(&#
39;success&#
39;); // 可
动态改为 &#
39;error&#
39;/&#
39;warning&#
39;
const iconUrl = computed(() => {
return new URL(`/src/assets/icons/${iconType
.value}
.svg`, import
.meta
.url)
.href;
});
</script>
<template>
<img :src="iconUrl" alt="状态图标">
</template>
```
根据上述方案，可灵活实现
Vue 3 + Vite 下的
动态资源加载需求。
文章讲述了在使用Vue3和Vite开发时，如何解决动态引入图片资源在打包后无法找到的问题，通过import.meta.glob动态加载并处理图片路径。
扫一扫
5368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
