- 本地图片加载
项目根目录下新建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
- 总结
| Image控件构造函数 | 描述 |
|---|---|
| Image | 用于从ImageProvider获取图像 |
| Image.asset | 用于使用key从AssetBundle获取图像 |
| Image.network | 用于从URL地址获取图像 |
| Image.file | 用于从File获取图像 |
更多参考：
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
