图片加载优化
# 图片缓存
## 示例1:
原本代码中使用的是uniapp自带的image标签
原代码
![image.png](https://cos.easydoc.net/24688113/files/l9w547el.png)
修改后的代码
![image.png](https://cos.easydoc.net/24688113/files/l9w54zvp.png)
## 示例2:
原本代码中使用的是uniapp自带的image标签,但要去掉缓存组件自带的占位图
原代码
![image.png](https://cos.easydoc.net/24688113/files/l9w61fgt.png)
修改后的代码
![image.png](https://cos.easydoc.net/24688113/files/l9w64386.png)
图中的**placeholder-img**意思是去掉默认的加载占位图
默认占位图如下:
![image33.png](https://cos.easydoc.net/24688113/files/l9w65e1v.png)
## 示例3:
原本代码中使用的是uview1.0的u-image标签
原代码
![image.png](https://cos.easydoc.net/24688113/files/l9w6qcvy.png)
修改后的代码
![image.png](https://cos.easydoc.net/24688113/files/l9w6r3b5.png)
## 示例4:
原代码中没有办法使用cache-image组件,可采用在js中转换
原代码
![image.png](https://cos.easydoc.net/24688113/files/l9w6u93d.png)
![image.png](https://cos.easydoc.net/24688113/files/l9w6xh6l.png)
修改后的代码
![image.png](https://cos.easydoc.net/24688113/files/l9w6u93d.png)
![image.png](https://cos.easydoc.net/24688113/files/l9w6vthc.png)
## 效果
图片缓存成功后再次访问时
![image.png](https://cos.easydoc.net/24688113/files/l9w5klpy.png)
## api差异
除了有自动缓存图片的功能外,其它属性事件等都与对应的官方组件用法完全一致
# 图片压缩上传
## 示例:
原代码
![image.png](https://cos.easydoc.net/24688113/files/l9w72bk6.png)
修改后的代码
![image.png](https://cos.easydoc.net/24688113/files/l9w72rs2.png)
#### 需要注意
封装的方法除uniapp upload方法的原有参数外,
新增了俩个参数
**compressMode** :压缩模式;1代表强力压缩,体积更小但质量可能会差 2代表标准压缩,体积适中质量基本不损失 ; 不传默认取1强力压缩。
**compressRatio**:0-1之间的小数,代表要压缩的比例值。不传默认会按文件大小自动计算压缩比后压缩
![image.png](https://cos.easydoc.net/24688113/files/l9w77kkl.png)
## api差异
除了有自动压缩图片的功能,以及新增的俩个参数外,
其它参数都与对应的官方组件用法完全一致