Flutter中如何校验网络图片状态 处理图片404加载异常

• 优先使用组件内置错误回调实现，性能最优：
  Flutter框架内置的图片组件已经对网络请求状态做了统一处理，只要图片请求返回状态码不是200（包含404、服务端错误、网络超时等所有加载异常场景），都会触发错误回调，不需要额外发起预校验请求浪费流量和加载时间。
  直接使用Image.network构造函数配置errorBuilder参数即可完成兜底逻辑：

Image.network(
  'https://example.com/your-target-image.jpg', // 替换为目标网络图片地址
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  // 加载失败回调，所有异常包括404都会触发
  errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
    // 返回预设的本地默认图
    return Image.asset(
      'assets/images/default_img.png', // 替换为项目内的默认图资源路径
      width: 200,
      height: 200,
      fit: BoxFit.cover,
    );
  },
)

• 特殊场景需要单独识别404状态码的实现方式：
  如果业务需要区分404和其他加载错误（比如404展示缺省图、网络超时展示重试按钮），可以先通过HTTP请求获取图片接口的响应状态，判断状态码后再决定加载网络图还是兜底图，注意这种方式会多一次网络请求，会增加加载耗时。
  示例逻辑：

import 'package:http/http.dart' as http;

// 封装返回对应图片Provider的方法
Future<ImageProvider> getImageProvider(String imgUrl) async {
  try {
    final response = await http.get(Uri.parse(imgUrl));
    if (response.statusCode == 200) {
      return NetworkImage(imgUrl);
    } else if (response.statusCode == 404) {
      // 404返回专属默认图资源
      return const AssetImage('assets/images/404_placeholder.png');
    } else {
      // 其他错误返回通用错误占位图
      return const AssetImage('assets/images/error_placeholder.png');
    }
  } catch (e) {
    // 网络异常等错误返回通用占位
    return const AssetImage('assets/images/error_placeholder.png');
  }
}

使用时可以配合FutureBuilder完成渲染：

FutureBuilder<ImageProvider>(
  future: getImageProvider('目标网络图片地址'),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const SizedBox(
        width: 200,
        height: 200,
        child: Center(child: CircularProgressIndicator()),
      );
    }
    return Image(
      image: snapshot.data ?? const AssetImage('assets/images/default_img.png'),
      width: 200,
      height: 200,
      fit: BoxFit.cover,
    );
  },
)

注意：使用本地资源图前，需要先在pubspec.yaml文件中配置对应的assets资源路径，否则会加载失败。

内容的提问来源于stack exchange，提问作者kei