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、在页面可直接引入图片大对象后，将图片具体名作为属性取值

 

原文地址：http://www.cnblogs.com/HE0318bei/p/16918206.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性