Ionic2 UI组件之 ImageLoader

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ionic2 UI组件之 ImageLoader相关的知识,希望对你有一定的参考价值。

ImageLoader:通过后台线程加载图片(异步)并缓存。类似于Glide或者Picasso。

组件特性:

  • 后台线程下载图片,下载速度更快,不使用webview的资源;
  • 缓存图像。图像将在您下次显示时立即显示,因为它们已保存在本地存储区,而不是每次都去服务器请求;
  • 可显示加载进度条,也可关闭;
  • 可设置最大缓存大小并自动删除旧图像;
  • 服务器图像不存在时允许设置一个默认图像;

参考地址:https://github.com/zyra/ionic-image-loader

==========================================================

1)安装包:npm install --save ionic-image-loader

2)安装包和插件:npm i --save @ionic-native/file

ionic cordova plugin add cordova-plugin-file

npm i --save @ionic-native/transfer

ionic cordova plugin add cordova-plugin-file-transfer

3)在app.module.ts文件中添加:import { IonicImageLoader } from ‘ionic-image-loader‘;

添加:IonicImageLoader.forRoot();

4)Then add IonicImageLoader in your child/shared module(s)???

5)使用组件:<img-loader src="https://path.to/my/image.jpg"></img-loader>

<img-loader src="https://path.to/my/image.jpg" useImg></img-loader>

 

以上是关于Ionic2 UI组件之 ImageLoader的主要内容,如果未能解决你的问题,请参考以下文章

Ionic2 - 在 UI 上显示项目图像

Ionic2 自学须知的基本知识点

Ionic2 - 给定路径,无法在 UI 上显示本地图像

ionic2 自学须知的基本知识点

Ionic2 组件包装在自定义组件中

Ionic2 用其内容替换组件选择器