【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。