vue3 vite2 动态引入图片

您所在的位置：网站首页 › vue动态绑定背景图片 › vue3 vite2 动态引入图片

vue3 vite2 动态引入图片

2023-09-03 06:32| 来源: 网络整理| 查看: 265

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

第一种 new Url

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

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

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

const getImage = (name: string): string => { return new URL(`assets/image/${name}.png`, importa.url).href }

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

new Url

创建一个新的url对象

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

importa 对象包含关于当前模块的信息。

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

因此可以把importa 打印出来：

其中有个url属性

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

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

第二种 importa.glob

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

const modules = importa.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 = importa.globEager('./image/*')； // 获取指定的图片 const path = (`./images/${name}.png`); return picModules[path].default }

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

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

【本文地址】

vue3 vite2 动态引入图片

vue3 vite2 动态引入图片

今日新闻

推荐新闻