vue3 vite2 动态引入图片(vue视频如何添加动图)
由于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动态倒入图片的，目前我用到的两种语法
作者：菜啊菜的就习惯了
链接：https://juejin.cn/post/7030698018609315871