修身养性,知行合一

  • 首页
  • 爱码
    • 系统
    • 数据库
    • JavaScript
    • CSharp
    • Python
  • 生活
    • 文化
    • 美食
  • 杂谈
  • 关于
修身养性,知行合一
码字,杂谈
  1. 首页
  2. 爱码
  3. 前端
  4. JavaScript
  5. Vue
  6. 正文

Vue3 动态添加图片路径

2021年6月24日 2886点热度 1人点赞 0条评论

开始之前

之前在 vue2 中经常使用类似方法,直接 reuqire(<url>) 即可。今天在写 vue3 的内容时,遇到了,习惯性的填上了这个,结果发现不行~

都怪我,确实还没完整的看上一遍 vite 的内容,就是一直使用而已。这下好了,赶紧一番搜索翻阅文档,vite 和 webpack 的核心差别还是挺大的,在 vite 中并没有这样的包。于是就有了下面的操作。

解决方法

对于所有动态拼接的路径,只要不是纯字符串的,就需要使用下面的方式。

Glob

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

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

上面的内容会被编译为:

// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js')
}

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

请注意:

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

以上内容来自 官方内容。

使用 Glob 导入图片

有了上面的知识,就可以导入图片了。其实将图片导入为模块是一个挺不习惯的事情。

比如我们现在已知默认图片路径是 ./../assets/img/,我们现在需要根据图片名称获取图片内容。那么我们就可以这样:

const picture = import.meta.globEager("./../assets/img/*")[`./../assets/img/${imageName}`];

这样一来,我们得到了一个名为 picture 的模块,嗯,它长这个样子:

file

然后我们在模板中添加路径即可,使用方法:

<img :src="picture.default" alt="" />

一定不要忘记使用 .default。

这样就ok了。


参考:Vite 官方文档,Github

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: vite vue
最后更新:2021年6月24日

jeremyjone

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

文章目录
  • 开始之前
  • 解决方法
    • Glob
    • 使用 Glob 导入图片
最新 热点 随机
最新 热点 随机
我的开源组件 @xpyjs/gantt 100颗星星啦 volar 检查 element 表格的 slot-scope 错误 关于 *.vue 文件中使用 TypeScript 声明类型报错的解决方案 element table 加载时宽度闪烁问题 windows 无法登录便签、OneNote等应用 vue2 中 vuex 对 ts 的支持
volar 检查 element 表格的 slot-scope 错误我的开源组件 @xpyjs/gantt 100颗星星啦
浅谈if...else与switch的区别和效率问题 WSL 安装问题 0x8007019e、0x800701bc、0x80370102 js 问号链以及双问号的打包问题 Proxy - JavaScript 初一随笔 在 CentOS 上安装 PHP7

(っ•̀ω•́)っ✎⁾⁾ 开心每一天

COPYRIGHT © 2021 jeremyjone.com. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

京ICP备19012859号-1

京公网安备 11010802028585号