flutter如何使用image.network加载网络图片

在Flutter中，我想使用Image.network加载网络图片，但遇到了一些问题。图片有时无法显示，出现空白或错误占位图。请问如何正确使用Image.network？是否需要额外配置网络权限或处理异常情况？如果图片加载失败，有没有推荐的错误处理方式或替代方案？

2 回复

在Flutter中使用Image.network加载网络图片，只需传入图片URL即可：

Image.network('https://example.com/image.jpg')

可设置宽高、占位图等属性：

Image.network(
  'https://example.com/image.jpg',
  width: 100,
  height: 100,
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return CircularProgressIndicator();
  },
)

更多关于flutter如何使用image.network加载网络图片的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 Image.network 加载网络图片非常简单，只需要提供图片的 URL 即可。

基本用法

Image.network(
  'https://example.com/images/sample.jpg',
)

完整参数示例

Image.network(
  'https://example.com/images/sample.jpg',
  width: 200,           // 设置宽度
  height: 150,          // 设置高度
  fit: BoxFit.cover,    // 图片填充方式
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded / 
              loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error, color: Colors.red);
  },
)

常用属性说明

  • width/height: 设置图片尺寸
  • fit: 图片填充方式（cover、contain、fill 等）
  • loadingBuilder: 加载时的回调，可显示加载进度
  • errorBuilder: 加载失败时的回调，显示错误提示

注意事项

  1. 确保应用有网络权限（Android 和 iOS 需要配置）
  2. 建议处理加载中和加载失败的状态
  3. 对于大量图片，考虑使用缓存库如 cached_network_image

这是最基础的网络图片加载方式，适合简单的图片显示需求。

回到顶部