vite+vue3批量导入静态资源图片；动态绑定大量图片

vite版本：vite3；vue版本：vue3

打包上线后发现，动态绑定的图片皆失效。

单图可用 import 导入解决，但是若有大量图片，一一导入则耗时耗力。

vue2+webpack 可用 require 解决批量导入资源的问题。

vite中无 require ，vite3 需要使用 import.meta.glob('路径' , {eager:true}) 导入

实际解决如下：

1、首先在存放静态图片的路径下新建个 js文件

2、将所有图片用vite3批量导入资源的方法导入进来后，循环将所有图片处理成一个大对象

用图片具体的名称做键，导入该图片的地址做值

 1 // 将所有图片导入进来

 2 const req1 = import.meta.glob('./images/*.*', {eager: true})

 3 const req2 = import.meta.glob('./images/casesList/*.*', {eager: true})

 4 const req3 = import.meta.glob('./images/hardware_agv/*.*', {eager: true})

 5 const req4 = import.meta.glob('./images/hardware_sj/*.*', {eager: true})

 6 const req5 = import.meta.glob('./images/software/*.*', {eager: true})

 7

 8 const req = {...req1, ...req2, ...req3, ...req4, ...req5}

 9

10 const imagesMap = {}

11

12 // 循环所有图片，将图片名设置成键，值为导入该图片的地址

13 for (const key in req) {

14     // let name = key.replace(/(\.\/images\/|\..*)/g, '')

15     let name =key.split('/').slice(-1)[0].split('.')[0]

16

17     // 抛出图片大对象后，文件页面直接引入后将图片的具体名称作为属性就能导入该图片

18     imagesMap[name] = req[key].default

19 }

20

21 export default imagesMap

3、在页面可直接引入图片大对象后，将图片具体名作为属性取值

巴特西

vite+vue3批量导入静态资源图片；动态绑定大量图片

最新文章

热门文章