ionic3 图片缓存

注意：本次使用为下链中的版本配置(IO3)并亲测有效，实际中可根据版本情况，参考官方示例进行相关的更新改动：

https://github.com/zyra/ionic-image-loader

https://github.com/zyra/ionic-image-loader/tree/60d7c863bbd946cb1413522d5a3d307132bc0a60

 

 1、分别安装所需依赖

npm i  ionic-image-loader@^4.1.1 —save
npm i @ionic-native/file@^4.20.0 @ionic-native/file-transfer@^4.20.0 —save
ionic cordova plugin add cordova-plugin-file-transfer
ionic cordova plugin add cordova-plugin-file

2、app.module 引入：

import { IonicImageLoader } from 'ionic-image-loader';

import: […IonicImageLoader.forRoot(),…..]

3、app.component 配置：

imageLoaderConfig.enableDebugMode();
imageLoaderConfig.setFallbackUrl('assets/imgs/default.png');
imageLoaderConfig.setImageReturnType('base64');
imageLoaderConfig.setSpinnerColor('secondary');
imageLoaderConfig.setSpinnerName('bubbles');
imageLoaderConfig.maxCacheSize = 2 * 1024 * 1024; // 2 MB
imageLoaderConfig.maxCacheAge = 24 * 60 * 60 * 1000; // 1 day

4、组件中使用

<img-loader [useImg]="true" *ngIf="conversation.fromType == 2" [src]="....."></img-loader>

详情请看：

https://github.com/zyra/ionic-image-loader

https://www.youtube.com/watch?v=BPI6426c4ZU

 

问题补充：若多次请求均为同一图片源，此时后台已使用缓存图片，但显示上却会有闪烁加载现象，可通过在 ngFor 中增加 trackBy 函数以解决，详情请看：

https://blog.csdn.net/chelen_jak/article/details/82258901