【Flutter】 Image常用图片加载方式

• 本地图片加载
  项目根目录下新建 images 目录并将图片拷贝进去，pubspec.yaml 图片路径配置

flutter:
  ...
  # 图片路径配置
  assets:
   - images/logo.jpg
   - images/pic.jpg
  ...

加载项目资源包图片

Image(
  image: AssetImage("images/pic.jpg"),
  height: 100.0,
  width: 100.0,
),
// Or
Image.asset(
  "images/pic.jpg",
  height: 100.0,
  width: 100.0,
),

• 网络图片加载

// 无本地缓存
Image.network(
  'http://pic23.nipic.com/20120810/5736735_162511503170_2.jpg',
  width: 200,
  height: 200,
)
// or
// 淡入效果，无本地缓存
FadeInImage.assetNetwork(
  placeholder: 'images/avatar.png', // 占位图
  image: 'http://pic23.nipic.com/20120810/5736735_162511503170_2.jpg',
  width: 200,
  height: 200
)

• 使用第三方控件

# `pubspec.yaml`配置
dependencies:
  flutter:
    sdk: flutter

  cached_network_image: ^1.1.1

// 导入包
import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
  height: 200.0,
  alignment: Alignment.centerLeft,
  imageUrl: "$imageUrl",
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)
// or
Image(
  image: CachedNetworkImageProvider(imageUrl),
  height: 200.0,
  alignment: Alignment.centerLeft,
),

cached_network_image Or flutter_advanced_networkimage

• 总结

更多参考：
http://codingdict.com/blog/article/2019/3/5/883.html
https://www.cnblogs.com/x-man/p/10648389.html
https://m.jb51.net/article/165613.htm