vue3+vite中多张图片遍历不显示问题!

作者在尝试使用Vue3和Vite框架时遇到动态引入静态文件的挑战,Vue3不再支持require()。文中提到,单个文件可以使用相对路径解决,但多个文件在data中定义并遍历显示不出来。官方推荐的newURL()结合import.meta.url在开发环境有效,但在生产环境中出现问题。最后,作者采取了逐个import文件到数组的折衷方法,虽然不解为何直接放入URL无效。

第一次用vue3+vite的框架去写页面,因为vue3中去掉了require()动态引入的方式,特别不方便,

后面去vite官方文档找替代方法,

具体内容可自行查看:静态资源处理 | Vite 官方中文文档 (vitejs.dev)

其实单个静态文件可以使用相对路径去引用就ok,不要用绝对路径,开发环境正常,放到正式环境会有问题的。

然后就是多个静态文件,在data定义数组,然后遍历,是显示不出来的(我是这样,不晓得各位行不行!),如上图,用了官方推荐的方法,new URL() + import.meta.url

在开发环境可以,但是在正式环境也不行,很奇怪。。。。。还是没能解决!

最后最后!!!

用了一种最蠢的方法,用import...from...的方式引入每张图片,去定义到数组里面

有人会问了,为什么不直接放到url里面呢?还多一步去引入
哈哈哈哈,因为我也不太理解,放到里面就是不行啊!有懂哥的可以告诉我!谢谢

 

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值