require图片相对路径时,有些图片能显示,有些不能

20 篇文章 0 订阅
10 篇文章 0 订阅
 let img = require(`../assets/images/index/icon_ku.png`)
 let img2 = require(`../assets/images/index/icon_DB2.png`)
 console.log(img) // 结果:/img/icon_ku.b259504f.png
 console.log(img2) // 结果:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAtCAYAAAD7nag2AAAAAXNSR0IArs4c6QAADBFJREFUaN7VmXlUVPcVx6dNNEvTNqlpzVZ7upw0nqRH08TYJGpcqMYtKAi4K25VE7ckrTUxwbiCIAKKsinIsDmKSlTcN1wxKpjgvjAwwLDNW2afgZlv733jYNSYP0ak4XfOPW9+v2F49/Pu9vvdp1LdNSaky+nj1bJ7fLqEV

编码过程中发现,同样的引用方式,有些图片能正常显示,有些则不能;

打印出相应结果后,发现二者结果也不一样,有些被转成了base64,有些则没有;

被转成base64不能正常显示;

找资料发现:require是node模块化引入的规范,通过require引入图片的方式可以将图片编译成base64,这样就不存在路径问题,但是问题来了,转成base64是有大小限制的,可在webpack.base.config.js中对大小限制进行更改。但是我的需求恰恰是不需要转成base64,所以比较图片大小后,发现‘ku’比‘DB2’大了1kb,如下图所示:

 于是,找UI重新切了一张大一点的图,将‘DB2’换成了6KB的图,结果能正常显示,问题解决。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值