【bug解决】微信分享后右侧logo图片突然不显示了

我经常会有怎么又有bug了呢,刚刚不是还好好的嘛...这样的疑惑...

今天又出现了这样的疑惑...

vue cli3构建H5项目的时候,在微信分享配置完成,测试完成之后,我将图片进行了在线压缩,然后上传至服务器。

然后,就出现了bug:微信分享之后logo图片不显示了,但是标题和描述还是正常的...

难道图片路径引用出错了?可是我刚刚也没动什么代码啊,然后我重新看了下打包生成的图片文件夹,发现logo图片logo.jpg没有被打包进来,重新打包了几次之后还是没有...但之前是会打包进来的,这是为什么呢?

然后我在引入图片的main.js中打印了图片,在浏览器中一查看,发现图片原来是被转成的base64格式的了...这才恍然大悟,vue cli3默认配置中会将<10kb的图片转成base64格式的,原本图片是>10kb的,所以会被打包至Img文件夹中,但我压缩之后,图片<10kb,就没有进行打包了,而是转为了base64格式。

不过为什么变成base64格式的之后,微信分享就识别不了了呢?这个也是个疑惑...希望之后能解决这个疑惑...

 

不过现在的话,我们先来解决当下的问题:

1、更改webpack配置

首先想到的是更改webpack配置,让图片不会变成base64格式。

// 具体可查看vue cli3的官方文档
export default = { chainWebpack: config => { config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options => Object.assign(options, { limit: 5120 })) // Object.assign用来合并对象 相同的属性会进行覆盖 limit单位是byte(字节) 5120bytes为5kb } }

// 这里我们顺带复习一下单位的概念以及它们之间的换算关系:
概念:

word --- 字
byte --- 字节
bit --- 位

换算关系:

1字(word) = 2字节(byte) = 16位(bit)

1GB = 1024MB
1MB = 1024KB
1KB = 1024Byte
1Byte = 8bit(也就是说,一字节等于8位,每一位(bit)用0或1表示)

传输速率:
bps: bits per second。一般网络通讯用【bps】作为单位。比如56kbps、100Mbps...
Bps: Byte per second。一般电脑用【Bps】显示速度。比如1Mbps大约等同于1024Kbps等于128KBps。

比如当我们使用U盘进行传输的时候,大家都‘480mbps’误解为480兆/秒,但实际上这个b不是指byte,而是指bit,也就是说,
‘480mbps’应该被理解为480兆比特/秒,或者480兆位/秒,换算之后相当于60兆字节/秒。

而我们说的硬盘容量40gb, 100mb等,这里面的b指的是字节(byte)。

总结:
与传输速度有关的b一般指的是bit;
与容量有关的一般指的是byte。

参考文章:字节、字、bit、byte的关系

但是这也有一个问题,项目中还有其它的<10kb的图片,我是希望被转化成为base64格式的。那有没有方式,可以让logo这一张<10kb的图片不变成base64的呢?

方法:引入方式(将相对路径变为绝对路径),图片打包(放在public中而不是assets中)

比如一般情况下我们使用如下方式导入图片,此方式会被webpack编译:

注意项:即使是放在public文件夹下,虽然生产构建时图片会被复制进dist文件夹下,但是实现由于使用的是相对路径,引入图片处还是会引入base64图片,而不是public中的图片。

如果不想被编译,我们可以使用绝对路径:(上线时填写正式地址)

除此之外,我们引入的图可以存放在public文件夹下,此文件夹下的文件会在不经过webpack处理的情况下直接复制到dist输出文件夹下。

在其他文件夹下,没有引入的文件是不会被webpack打包到dist输出文件夹下的。

 

2、使用>10kb的logo图片

最简单粗暴的方式...

 

从这次经历中,我又一次明白了一句话:所有的bug是都有原因的啊呜呜呜!!!

posted @ 2019-11-21 16:18  WANNANANANA  阅读(688)  评论(0编辑  收藏  举报