vue和vite动态加载图片库
需求
vue里面要加载一些备选本地图片,但又不经常用的图片文件.
问题
- 比如大屏有很多静态素材,vue的打包机制是用到了才会打包,不预加载是不会打包的,这就导致图片打不进去
- 怎么批量获取这些图片名称?咱随时都有可能删除或增加图片,一个个把名字记录下来肯定不可能
- 知道了名字,那怎么保证下次预览还能加载到这个名字?路径也是问题
原始解决方法
- 原工程avue提出的解决方法是把图片名字统一命名,后面加1,2,3顺序命名,这样子解决获取名字的问题
- 把img直接放到pubic的img文件夹中,能保证不管图片有没有用,都会原封不动的打包到dist中,解决路径问题
貌似解决了前面需求,但是会有新问题
- 图片名字不能随意命名,必须同文件夹名一致,就像下面这样,那大家能知道bg1里面内容是啥么?不知道
- 假如bg3不想要了,直接删掉,程序会报错,因为当时就是预设好要加载多少图片,删一个就需要补一张图片
- 后缀格式需要一样,或者png和jpg事先要记录下来???water??这么麻烦??
我的解决方法
针对以上问题
- 用 require.context(paths) 动态获取文件名称----解决不能随意命名问题,同时能解决后缀不能改动,因为后缀也是动态获取的, 但require.context不能获取到src目录以外的地址??麻烦~~~~~ 那只能乖乖把图片放到assets文件夹中,哈哈问题解决,但是!!!打包又是问题,require.context不会把图片打包进工程,不信你自己试试!!!
copy-webpack-plugin插件弥补上面不打包的不足,能够把指定目录下所有图片打包到指定文件夹下
vue.config里面配置走一波,这样子使得图片都打包到了img目录下
- 开始循环获取文件,又遇到坑,require.context() 中不能使用动态变量!!!!要前功尽弃了么??算了麻烦就麻烦一点,一个个的写,像我这样子,虽然很丑,但没有更好办法
这样子就把所有图片都可以展示出来了,恢复以前的功能同时,解决了原始办法的硬伤
vite 加载图片
vite 中不支持require,不能用上面的require.context(paths),需要稍微改改,我的解决方法是
const arrs = {
bg: Object.keys(import.meta.globEager(`/src/assets/img/bg/*.*`)),
border: Object.keys(
import.meta.globEager(`/src/assets/img/border/*.*`)
),
source: Object.keys(
import.meta.globEager(`/src/assets/img/source/*.*`)
),
banner: Object.keys(
import.meta.globEager(`/src/assets/img/banner/*.*`)
),
other: Object.keys(import.meta.globEager(`/src/assets/img/other/*.*`))
}
复制代码样子看起来挺丑,但是import.meta.globEager里面不支持动态模板语法,所以就将就着吧! 好了,下面的处理方法和上面的一致,就不多说了,写下我自己的解决办法,也是希望帮助一些遇到相同困难的伙伴们,当然如果有更好的解决方法,也希望评论区留言!!
