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、在页面可直接引入图片大对象后,将图片具体名作为属性取值
标签:const,eager,导入,meta,vue3,import,vite,图片 From: https://www.cnblogs.com/HE0318bei/p/16918206.html