vue3 vite2 动态引入图片

由于vue3之后，用vite替代了webpack，原本的require语法不生效了。对于动态的拼接图片，目前有我用过生效的有两种方法。

第一种 new Url

官网说：“实际上，Vite 并不需要在开发阶段处理这些代码！在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。”

因此，以下的方法开发阶段不需要了解。

首先把给src绑定一个函数，然后把需要图片名字传给函数。

<img :src="getImage(name)">
const getImage = (name: string): string => {
    return new URL(`assets/image/${name}.png`, import.meta.url).href
}

其中有两个知识点：new URL 和import.meta.url。

new Url

创建一个新的url对象

// url 完整的 URL，或者仅路径（如果设置了 base）
// [base] -   base —— 可选的 base URL：如果设置了此参数，且参数 url 只有路径，则会根据这个 base 生成 URL。
new Url(url, [base])

import.meta

import.meta 对象包含关于当前模块的信息。

它的内容取决于其所在的环境。在浏览器环境中，它包含当前脚本的 URL，或者如果它是在 HTML 中的话，则包含当前页面的 URL。

因此可以把import.meta 打印出来：

其中有个url属性

综上所述，整个函数的返回值。打印出来

里面的href值就是当前图片的地址

第二种 import.meta.glob

在 vite 中，提供了 Glob 导入功能，可以从文件系统导入多个模块。

const modules = import.meta.glob("./dir/*.js")

vite编译后：

const moudles = {
    './dir/foo.js': () => ('./dir/foo.js'),
    './dir/bar.js': () => ('./dir/bar/js')
}

匹配到的文件将通过动态导入默认懒加载，并会在构建时分离为独立的 chunk。

请注意：

这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头，相对于项目根目录解析），从依赖中来的 Glob 不被支持。 Glob 导入只能使用默认导入（无法使用按名导入，也无法使用 import * as …。

const getImage = (name: string): string => {
    // 其实就是将图片导为模块
    // 获取图片模块
    const picModules = import.meta.globEager('./image/*')；
    // 获取指定的图片
    const path = (`./images/${name}.png`);
    return picModules[path].default
}

<img :src="getImage(name)">

需要注意的是不要忘记加上.defalut

以上就是vue3 vite2动态倒入图片的，目前我用到的两种语法