- 本地圖片加載
項(xiàng)目根目錄下新建images目錄并將圖片拷貝進(jìn)去，pubspec.yaml圖片路徑配置
flutter:
...
# 圖片路徑配置
assets:
- images/logo.jpg
- images/pic.jpg
...
加載項(xiàng)目資源包圖片
Image(
image: AssetImage("images/pic.jpg"),
height: 100.0,
width: 100.0,
),
// Or
Image.asset(
"images/pic.jpg",
height: 100.0,
width: 100.0,
),
- 網(wǎng)絡(luò)圖片加載
// 無本地緩存
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
// 導(dǎo)入包
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
- 總結(jié)
| Image控件構(gòu)造函數(shù) | 描述 |
|---|---|
| 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
