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

 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的图,结果能正常显示,问题解决。

猜你喜欢

转载自blog.csdn.net/shidouyu/article/details/122338283
今日推荐